【问题标题】:Jquery Search Auto Complete not call on first ajax loadJquery Search Auto Complete不调用第一个ajax加载
【发布时间】:2025-12-06 21:15:01
【问题描述】:

当用户在输入框中输入至少三个字符时,我想在我的网站上设置自动完成功能。我为此使用了 autocomplete.js 插件。我正在做的是keyup,ajax调用发送到一个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
        }

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

});

【问题讨论】:

    标签: javascript jquery ajax search autocomplete


    【解决方案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
    

    希望对你有所帮助。

    【讨论】:

    • 我试试 $("#CAT_Custom_284431").focus();但仍然无法正常工作。