Currently, I am using jQuery UI Autocomplete in conjunction with WebSockets to fetch and display a list of options. Each time a keystroke is detected on the input field (.keyup()), a call is made to retrieve the list. However, I have encountered an issue where after entering a character and fetching the corresponding list, the next keystroke continues searching within the previous list instead of the newly fetched one. The only way to refresh the list is by pressing backspace. How can I ensure that the list updates immediately without this workaround? Any assistance would be greatly appreciated.
UPDATE: Here is a snippet of the code: This section detects keystrokes and triggers the search
$('#pick_up_location').keyup(function(e) {
var param = $("#pick_up_location").val();
var userType = "1";
search(param, userType,"CBPickSearchAction", "", 0);
This part displays the received results in the autocomplete widget:
function onMessage(data) {
try {
var obj = $.parseJSON(data);
$("#pick_up_location").autocomplete({
source: obj,
minLength: 0,
delay: 0,
autoFocus: true,
search: function() {},
focus: function(event, ui) {
event.preventDefault();
return false;
},
open: function(event, ui){
$('#pick_up_location').autocomplete("widget").width();
.data( "ui-autocomplete" )._renderItem = function(ul, item) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
$("#pick_up_location").autocomplete('enable');
$("#pick_up_location").keydown();
} catch(err) {
//console.log( err.message);
}