Select not populating

[bravo14]

Hi

Trying to use the plugin to populate a select menu. The response is generated in JSON format, but the select is not showing the options.

The select field looks like this:-

<select class="form-control basicAutoSelect" name="selLocation" placeholder="type to search..." data-url="ajax/getLocations.php" autocomplete="off"></select>

A snippet of the JSON format looks like below

{"text":"Birao, Vakaga, Central African Republic","value":"240210"},{"text":"Biriyya, Northern District, Israel","value":"295402"} ...

I'm guessing I am missing something, any help would be great

[xcash]

Any output in console?

[bravo14]

Uncaught TypeError: this.items is undefined refreshItemList https://www.fotobank.online/js/bootstrap-autocomplete.js:1 updateItems https://www.fotobank.online/js/bootstrap-autocomplete.js:1 handlerStartShow https://www.fotobank.online/js/bootstrap-autocomplete.js:1 postSearchCallback https://www.fotobank.online/js/bootstrap-autocomplete.js:1 handlerDoSearch https://www.fotobank.online/js/bootstrap-autocomplete.js:1 search https://www.fotobank.online/edit-profile.php:721 jQuery 6 search https://www.fotobank.online/edit-profile.php:715 handlerDoSearch https://www.fotobank.online/js/bootstrap-autocomplete.js:1 handlerPreSearch https://www.fotobank.online/js/bootstrap-autocomplete.js:1 handlerTyped https://www.fotobank.online/js/bootstrap-autocomplete.js:1 bindDefaultEventListeners https://www.fotobank.online/js/bootstrap-autocomplete.js:1 jQuery 8 bindDefaultEventListeners https://www.fotobank.online/js/bootstrap-autocomplete.js:1 init https://www.fotobank.online/js/bootstrap-autocomplete.js:1 t https://www.fotobank.online/js/bootstrap-autocomplete.js:1 t.fn[a.NAME]/< https://www.fotobank.online/js/bootstrap-autocomplete.js:1 jQuery 2 a.NAME https://www.fotobank.online/js/bootstrap-autocomplete.js:1 https://www.fotobank.online/edit-profile.php:700

this is the initiaition as well

$('.basicAutoSelect').autoComplete({ resolver: 'custom', formatResult: function (item) { return { value: item.id, text: "[" + item.id + "] " + item.location, html: [ $('<img>').attr('src', item.icon).css("height", 18), ' ', item.text ] }; }, events: { search: function (qry, callback) { // let's do a custom ajax call $.ajax( 'ajax/getLocations.php', { data: { 'q': qry} } ).done(function (res) { callback(res.results) }); } } });

[xcash]

When you call the callback passing res.results you need to be sure that the returned JSON is { results: [ {...}, {...}, ] } If your JSON is different you need to adapt your code to deal with your format.

[bravo14]

JSON now formatted like below

{"results":[{"value":"4049979","text":"Birmingham, Alabama, United States"},{"value":"2655603","text":"Birmingham, England, United Kingdom"},{"value":"4986172","text":"Birmingham, Michigan, United States"}]}

The plugin initiaition looks like

$('.basicAutoSelect').autoComplete({ resolver: 'custom', events: { search: function (qry, callback) { // let's do a custom ajax call $.ajax( 'ajax/getLocations.php', { data: { 'qry': qry} } ).done(function (res) { callback(res.results) }); } } }); Select is still not populating with the results

[bravo14]

I have gone back to a basic setup using the one from the examples. The AJAX and JSON is working, just not populating the menu. The select setup <div class="form-group col-xs-12"> <label for="selLocation">Location</label> <select class="form-control basicAutoSelect" name="selLocation" placeholder="type to search..." data-url="ajax/getLocations.php" autocomplete="off"></select> </div> the jquery

$('.basicAutoSelect').autoComplete(); $('.basicAutoSelect').on('autocomplete.select', function (evt, item) { console.log('select'); $('.basicAutoSelectSelected').html(JSON.stringify(item)); });