这是我在Ajax自动完成搜索时遇到的问题。当我在文本框中键入内容时,它会显示结果列表。但是,当我重新加载页面并首次在文本框中键入时,结果列表未显示。再次,如果我退格文本并重新键入,结果将显示在结果列表中。此问题并非特定于任何浏览器。我没有得到问题的原因。
var locationSearchListData = [];
var termTemplate = "<span class='ui-autocomplete-term'>%s</span>";
var postData = '{cultureId : "DE"}';
// Ajax call to run webservice's methods.
$.ajax({
url: "/asmx/SearchLocations.asmx/GetAutoCompleteSearchLocations",
type: "POST",
data: postData,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (responseData) {
if (responseData != undefined && responseData != null && responseData.d.length > 0) {
for (i = 0; i < responseData.d.length; i++) {
// Add resopnse data in location search lis, this list is used as a source for autocomplete textbox.
locationSearchListData.push({
label: responseData.d[i].locationData,
latitude: responseData.d[i].latitude,
longitude: responseData.d[i].longitude
});
}
}
$(".autosearch").autocomplete({
// Set source for textbox, this source is used in autocomplete search.
source: locationSearchListData,
// Set required minimum length to display autocomplete list.
minLength: 3,
// Set required delay time to display autocomplete list.
delay: 500,
// Define selection method displaying results for the location selected.
select: function (event, ui) {
// Get the current selected item from the autocomplete list.
$(this).val(ui.item);
// Call display selected item for currently selected element.
displaySelectedItem(ui.item);
},
// Handle the autocomplete search suggestions menu opening.
open: function () {
// This method is used to highlight the searched text in the search items.
$('ul: li: a[class=ui-corner-all]').each(function () {
// Get each text value.
var text1 = $(this).text();
// Get user input from the search box.
var val = $("#<%= txtOrtOderPlz.ClientID %>").val();
// Get the regular expression to match.
re = new RegExp(val, "i");
// Match with the regular expression value.
matchNew = text1.match(re);
// Find the reg expression, replace it with bold font.
text = text1.replace(matchNew, ("<span style='font-weight:bold;color:#4D4D4D;'>") + matchNew + ("</span>"));
// Add the cutomised html in autocomplete searchlist.
$(this).html(text);
});
},
// On every search clear the data.
search: function (event, ui) {
// Clear results when no location found.
$("#<%= hdnSearchResultLatitude.ClientID %>").val('');
$("#<%= hdnSearchResultLongitude.ClientID %>").val('');
}
})
}
});