Select not populating - Githubissues

bravo14 commented 3 years ago

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 commented 3 years ago

Any output in console?

bravo14 commented 3 years ago

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: [ $('').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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 `

Location

                    <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)); });

xcash / bootstrap-autocomplete

Select not populating #123