0

我是新来的typeahead。我得到了来自远程的json数据,并显示在网络中。问题是在文本框中返回的数据不是自动完成的。下面是我的代码typeAhead自动完成功能不起作用

风格和脚本中使用

<link href="{{ asset('css/bootstrap-tagsinput.css') }}" rel="stylesheet" type="text/css" /> 
<link href="{{ asset('css/bootstrap-tagsinput-typeahead.css') }}" rel="stylesheet" type="text/css" /> 

<script src="{{ asset('js/bootstrap-tagsinput.min.js') }}" type="text/javascript"></script> 
<script src="{{ asset('js/handlebars.min.js') }}" type="text/javascript"></script> 
<script src="{{ asset('js/typeahead.bundle.min.js') }}" type="text/javascript"></script> 

文本框

<input type="text" name="language" placeholder="Language" id="typeahead_lang" class="tagsinput-typeahead"/> 

脚本

<script> 
$(document).ready(function() { 


var cities = new Bloodhound({ 
    datumTokenizer : Bloodhound.tokenizers.obj.whitespace('text'), 
    queryTokenizer : Bloodhound.tokenizers.whitespace,  
    remote: { 
    url: '{{ route("admin.packagelanguage") }}', 

    } 
}); 

cities.initialize(); 

var elt = $('#typeahead_lang'); 
    elt.tagsinput({ 
    itemValue: 'value', 
    itemText: 'text', 
    typeaheadjs: { 
     name: 'cities', 
     displayKey: 'text', 
     source: cities.ttAdapter() 
    } 
    }); 
}); 


</script> 

的Json返回的数据

[{text: 'English', value:'1' },{text: 'Afar', value:'2' },{text: 'Abkhazian', value:'3' },{text: 'Afrikaans', value:'4' },{text: 'Amharic', value:'5' }] 

我使用laravel框架。如何自动完成该文本框中返回的数据。请帮帮我。

回答

1

有点迟了,但是,这段代码适合我。

var elt = $('#elt'); 
elt.tagsinput({ 

    itemValue: 'value', 
    itemText: 'text', 
    typeaheadjs: [{ 
    hint: true, 
    highlight: true, 
    minLength: 2 
    },{ 
    name: 'cities', 
    displayKey: 'text', 
    source: cities.ttAdapter() 
    } 
    ] 
}); 
+0

Thanx for replay。我得到了答案。我的问题是返回json格式错误。 – Bipin