Question

以下是为html输入框添加自动填充建议的代码段，其中包含用于特定投放目的的城市名称：

getAllActiveCitiesList: function(){
    js_script.script.cities_polling_count += 1;
    js_script.script.ajax_loading_message = "Fetching all active and approved citiess....give us a minute!"
    if(js_script.script.all_active_approved_citiess == null && js_script.script.cities_polling_count < 12){
        $.ajax({
            type: "GET",
            url: "some/url/to/fetch/data",
            success: function(data){
                js_script.script.cities_polling_count = 0;
                if(data.length > 0){
                    js_script.script.all_active_approved_citiess =  data;
                    for(index in data){
                        cities_data = data[index]
                        js_script.script.cities_to_id_map[cities_data["name"] +" ( "+cities_data["citiesId"]+" )"] = cities_data["id"];
                    }
                    // setup autocomplete
                    $("#mss_cities_id").autocomplete({
                       source: Object.keys(js_script.script.cities_to_id_map)
                    });
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                js_script.script.flashPageBanner("<strong>Warning:</strong> Something went wrong with backend, auto-suggest for Citiess might not work ");
            }
        });
    }else if(js_script.script.cities_polling_count % 12 == 0){
        js_script.script.flashPageBanner("Something is wrong, auto-suggest for Citiess might not work ");
    }
}

标记分配的位置

<div class="form-group col-lg-4 no-padding-left">
    <div class="input-group input-group-lg col-lg-12">
        <input type="text" class="form-control text-uppercase" id="mss_cities_id" placeholder="Cities ID">
        <span class="input-group-btn">
            <button class="btn btn-default refresh-cities-id custom-hover-tooltip" title="Refresh Citiess List - Use ONLY if something is wrong!!">
                <i class="glyphicon glyphicon-refresh"></i>
            </button>
        </span>
    </div>
</div>

Ajax响应发送包含城市名称和城市代码的城市数据。

到目前为止，ajax在自动填充中设置了大约5000个值。我的问题是，如果我们慢慢输入一个或两个字母表，整个页面都会被卡在冻结模式中，而chrome有时会建议杀死该页面。

如果我们快速输入，通常不会出现问题。我的最终用户是打字技能慢的人，这个功能对他们来说变得比解决方案更加困难。

我想到的一个解决方案是停止自动完成查找，直到输入4个字符，但这可能会失败，因为某些城市（城市代码）可能只有2个字母。请建议如何解决这个问题？

jquery版本是1.12.4

jQuery自动完成冻结初始几个字母

0 个答案: