Reputation: 354
I am new to typeahead. I am getting the json
data from remote and is shown in the network. The problem is The returned data is not autocompleted in the text box. Below is my code
Style and Script Used
<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>
Textbox
<input type="text" name="language" placeholder="Language" id="typeahead_lang" class="tagsinput-typeahead"/>
Script
<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 Returned data
[{text: 'English', value:'1' },{text: 'Afar', value:'2' },{text: 'Abkhazian', value:'3' },{text: 'Afrikaans', value:'4' },{text: 'Amharic', value:'5' }]
I am using laravel framework. How to autocomplete the returned the data in that text box. Please Help me.
Upvotes: 0
Views: 883
Reputation: 121
A little late but,this code works for me.
var elt = $('#elt');
elt.tagsinput({
itemValue: 'value',
itemText: 'text',
typeaheadjs: [{
hint: true,
highlight: true,
minLength: 2
},{
name: 'cities',
displayKey: 'text',
source: cities.ttAdapter()
}
]
});
Upvotes: 1