Autocomplete not showing suggestion list when triggered second time - jquery-ui

Question

I have autocomplete with two sources. When an item is selected after search from first source, if certain conditions are met, the second search is forced. This brings back results - I can see them writing into console but the list of suggestions will not show up unless "keypress" is made. I tried to automate this with forcing the .ui-list to show and with forcing "keypress" events but to no avail... has anybody got any experience and advice on this? Thanks.
$(document).ready(function () {
var stopSearch = false;
var sel = "";
var finished = false;
$('#txtLiveDept').autocomplete({
source: function (request, response) {
console.log("stopSearch" + stopSearch);
if (stopSearch == false) {
console.log("first ajax");
$.ajax({
url: '/en-gb/LiveDepartures/CombinedAjax',
data: "{ inputTerm: '" + request.term + "'}",
//dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
autoFocus: true,
success: function (data) {
console.log(data.Locations);
console.log(data.ServiceResponses);
if (data)
var resp1 = data.Locations;
var resp2 = data.ServiceResponses;
var dataF = resp2.concat(resp1);
console.log(dataF);
response($.map(dataF, function (item) {
console.log("item" + item.FullText);
var label = "";
if (item.FullText == undefined) {
label = item.ServiceNumber + ", " + item.Description;
}
else {
label = item.FullText;
}
return {
Label: label,
FullText: item.FullText,
Category: item.Category,
Latitude: item.Latitude,
Longitude: item.Longitude,
value: label,
StopLabel: item.StopLabel,
ServiceId: item.ServiceId
}
}));
failure: function err(response) {
console.log("error: " + response.d);
}
},
});
}
else if (stopSearch == true) {
console.log("second ajax");
$.ajax({
url: '/en-gb/LiveDepartures/GetStops',
data: "{ serviceId: '" + sel + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
autoFocus: true,
success: function (data) {
if (data) {
response($.map(data, function (item) {
console.log("item" + item.Name + item.StopLabel);
$("#txtLiveDept").val("");
$(".ui-menu").show();
console.log("just before");
return {
label: item.Name + ", " + item.StopLabel,
FullText: item.FullText,
Category: item.Category,
Latitude: item.Latitude,
Longitude: item.Longitude,
value: item.Name + ", " + item.StopLabel,
StopLabel: item.StopLabel,
ServiceId: item.ServiceId
};
}));
}
},
});
}
},
select: function (e, selected) {
console.log("selected:" + selected.item.ServiceId);
if (selected.item.ServiceId != undefined) {
console.log("in third");
sel = selected.item.ServiceId;
var item = selected.item.ServiceId;
console.log("third item" + item);
stopSearch = true;
console.log("finished" + finished);
if (finished == false) {
$("#txtLiveDept").autocomplete("search", item);
}
else {
alert("hey");
}
}
},
minLength: 0
});
});

Answer 1

Please consider the following code.
$(function() {
var stopSearch = false;
var sel = "";
var finished = false;
function getCombined(q) {
var results;
$.ajax({
url: '/en-gb/LiveDepartures/CombinedAjax',
data: {
inputTerm: q
},
type: "POST",
contentType: "application/json; charset=utf-8",
success: function(data) {
console.log(data.Locations);
console.log(data.ServiceResponses);
if (data.length) {
var dataF = data.Locations.concat(data.ServiceResponses);
console.log(dataF);
results = $.map(dataF, function(item) {
console.log("item" + item.FullText);
var label = "";
if (item.FullText == undefined) {
label = item.ServiceNumber + ", " + item.Description;
} else {
label = item.FullText;
}
return {
Label: label,
FullText: item.FullText,
Category: item.Category,
Latitude: item.Latitude,
Longitude: item.Longitude,
value: label,
StopLabel: item.StopLabel,
ServiceId: item.ServiceId
}
});
}
},
failure: function err(response) {
console.log("error: " + response.d);
}
});
return results;
}
function getStops(q) {
var results;
$.ajax({
url: '/en-gb/LiveDepartures/GetStops',
data: {
serviceId: q
},
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function(data) {
if (data.length) {
results = $.map(data, function(item) {
console.log("item" + item.Name + item.StopLabel);
$("#txtLiveDept").val("");
$(".ui-menu").show();
console.log("just before");
return {
label: item.Name + ", " + item.StopLabel,
FullText: item.FullText,
Category: item.Category,
Latitude: item.Latitude,
Longitude: item.Longitude,
value: item.Name + ", " + item.StopLabel,
StopLabel: item.StopLabel,
ServiceId: item.ServiceId
};
});
}
}
});
return results;
}
$('#txtLiveDept').autocomplete({
autoFocus: true,
source: function(request, response) {
console.log("stopSearch", stopSearch);
if (stopSearch) {
console.log("second ajax");
response(getStops(sel));
} else {
console.log("first ajax");
response(getCombined(request.term));
}
},
select: function(e, selected) {
console.log("selected:" + selected.item.ServiceId);
if (selected.item.ServiceId != undefined) {
console.log("in third");
sel = selected.item.ServiceId;
var item = selected.item.ServiceId;
console.log("third item" + item);
stopSearch = true;
console.log("finished" + finished);
if (finished == false) {
$("#txtLiveDept").autocomplete("search", item);
} else {
alert("hey");
}
}
return false;
},
minLength: 0
});
$('#txtLiveDept').focus(function(){
$(this).autocomplete("search");
});
});