Question

I am working on a site called earthquake damage map. It is almost finished, however I have a problem with the autocomplete function. It works fine with the search button, but I want to get rid of the search button altogether. It should query the results when I click on a result in the list but instead displays all the results appearing in the list.

    <input type="text" id="search-string4" placeholder="Search by Earthquake" class="tb11" onclick="focus" oninput="doQuery()" onchange="doQuery()"> 

As you can see it queries the results as I type which is good but doesn’t display properly when a result is clicked in the list.

Any help would be much appreciated.

Answer 1

Whatever code you are calling on clicking the search button, you can move that code into select event of autocomplete as follows:

$( "#search-string4" ).autocomplete({
   select: function(event, ui) {
        doQuery();
   }
});

from jqueryui website,

select event is Triggered when an item is selected from the menu; ui.item refers to the selected item. The default action of select is to replace the text field’s value with the value of the selected item. Canceling this event prevents the value from being updated, but does not prevent the menu from closing