$.each循环中jQuery UI Autocomplete首次迭代结果不显示问题

问题根因 #

你在$.each循环内重复对同一个输入框调用autocomplete()初始化方法，jQuery UI Autocomplete组件多次初始化时，新配置会直接覆盖旧配置，而非叠加数据源。第一次循环配置的Result 1~3数据源会被第二次循环的Result 4~6覆盖，第二次的又会被第三次的Result 7~9覆盖。你能搜到Result 4~9属于偶现的逻辑异常，本质是重复初始化组件导致的配置冲突，同时原代码还存在闭包问题：所有搜索结果点击后都会跳转到最后一条数据的pageLink，无法对应到各自的页面。

修复方案 #

提前聚合所有数据源，仅对输入框做一次Autocomplete初始化即可。

原HTML代码（无需调整） #

<input type="text" name="searchKeywords" id="ninecSearchKeywords" placeholder="How To...">

修正后JS逻辑 #

jQuery(document).ready(function($){
    $.getJSON("apiUrl", function(data){
        // 聚合所有搜索条目，绑定关键词对应跳转链接
        let searchSource = [];
        $.each(data, function(key, value){
            $.each(value.keys, function(idx, keyword){
                searchSource.push({
                    label: keyword,
                    value: keyword,
                    pageLink: value.pageLink
                });
            });
        });
        // 仅初始化一次Autocomplete组件
        $("#ninecSearchKeywords").autocomplete({
            source: searchSource,
            autoFocus: true,
            select: function (event, ui) {
                window.location = ui.item.pageLink;
            }
        });
    });
});

优化说明 #

• 所有关键词统一聚合后再绑定组件，不会出现配置覆盖导致的数据源丢失问题
• 修复循环闭包缺陷，每个关键词点击后可跳转到对应配置的页面链接
• 减少重复初始化操作，组件运行性能更稳定

内容的提问来源于stack exchange，提问作者Wasim Sayyed