javascript - Jquery 搜索自动完成在第一次 ajax 加载时不调用

Question

当用户在输入框中输入至少三个字符时，我想在我的网站上放置自动完成功能。我为此使用 autocomplete.js 插件。我正在做的是在 keyup 上，ajax 调用发送到一个 url，该 url 以数组的形式返回所有搜索结果。然后我们调用 autoComplete.Set("mygroup1", srvcsCitiesSafe, "newPopupStyle"); $("#CAT_Custom_283923").trigger('keyup');

问题是它在第一次 keyup ajax 调用时不显示结果。但在第二次 ajax 调用时，它工作正常。谁能告诉我发生了什么事...这是我网站的网址 http://dbtrialsite.businesscatalyst.com/自动完成文本框字段是郊区/城市:

以下是我的代码

$(document).ready(function() {

    $("#CAT_Custom_283923").keyup(function() {

        var mystring = $('#CAT_Custom_283923').val();    

        if (mystring.length == 2) {
            console.log(mystring);
            console.log(mystring.length);
            console.log("Lenght is greater than 2");

            var srvcsCitiesSafe=[];
            var srvcsPCSafe=[];

            var dataString = 'CAT_Custom_283923='+ $('#CAT_Custom_283923').val()+
                '&CAT_Custom_284431='+$('#CAT_Custom_284431').val() ;

            $.ajax({
                type: "POST",
                url: 'http://dbtrialsite.businesscatalyst.com/Default.aspx?CCID=17248&FID=100351&ExcludeBoolFalse=True&PageID=9350053',

                data: dataString,

                beforeSend: function () {
                    //put loader here, or hide something    
                    console.log('Loading...');
                },
                success: function (response) {

                    console.log('Ok Results Loaded');

                    var srvcs_json = [];
                    mydata=$(response);

                    $(".srvcs", mydata).each(function() {
                        var myString=$(this).html();
                        srvcs_json.push( jQuery.parseJSON( myString ) );
                    });


                    var srvcsCities =[];
                    var srvcsPC =[];
                    for (var i=0; i < srvcs_json.length; i++) {
                        srvcsCities[i] = srvcs_json[i]['city'];
                        srvcsPC[i] = srvcs_json[i]['postcode'];
                    }

                    srvcsCitiesSafe = eliminateDuplicates(srvcsCities);
                    srvcsPCSafe     = eliminateDuplicates(srvcsPC);
                },
                complete: function () {
                    //calling autofill function
                    console.log("auto called");
                    autoComplete.Set("mygroup1", srvcsCitiesSafe, "newPopupStyle");
                    $("#CAT_Custom_283923").trigger('keyup');
                }

            });    //end ajax call
        }

    });
////////////////////////////////////////////////////////////////////////////////////

});

Answer 1

测试您的网络服务时我发现了一个问题。第一次 ajax 调用后，自动完成功能不会显示内容，但内容就在那里。然后，当我调试 JavaScript 代码并将焦点放在输入上时，会显示选项。也许，这个自动完成版本有一个错误。为了“解决”你的问题，我这样做了:

$.ajax({
type: "POST",
url: 'http://dbtrialsite.businesscatalyst.com/Default.aspx?CCID=17248&FID=100351&ExcludeBoolFalse=True&PageID=9350053',

data: dataString,

beforeSend : function() {
    //put loader here, or hide something    
    console.log('Loading...');
    $('#ajax-loader').show();
},

success: function(response){
    console.log('Ok Results Loaded');
    $('#ajax-loader').hide();

    var srvcs_json = [];
    mydata=$(response);

    $(".srvcs", mydata).each(function(){
        var myString=$(this).html();
        srvcs_json.push( jQuery.parseJSON( myString ) );
    });

    var srvcsCities =[];
    var srvcsPC =[];
    for (var i=0; i < srvcs_json.length; i++) {
        srvcsCities[i] = srvcs_json[i]['city'];
        srvcsPC[i] = srvcs_json[i]['postcode'];
    }

    srvcsCitiesSafe = eliminateDuplicates(srvcsCities);
    srvcsPCSafe     = eliminateDuplicates(srvcsPC);

    console.log("auto called");
    autoComplete.Set("mygroup1", srvcsCitiesSafe, "newPopupStyle");
    $("#CAT_Custom_284431").focus();
    $("#CAT_Custom_283923").focus();
}
});//end ajax call

希望对您有所帮助。