重新加载页面后,Ajax自动完成搜索不显示结果列表

时间:2017-09-21 14:18:20

标签: javascript jquery asp.net ajax autocomplete

这是我在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('');
                }
            })
        }
    });

0 个答案:

没有答案