为何JQuery Autocomplete无法正常展示传入的国家数组

问题表现 #

• 已完整加载 jQuery、jQuery Autocomplete 全部依赖库
• 提前准备好国家代码-国家名映射的键值对数据源、纯国家名字符串数组
• 搜索输入框已配置自动补全属性，但实际使用时配置的国家补全列表始终无法正常弹出展示

问题根因 #

1. DOM 渲染时机不匹配
   输入框上绑定了 Vue 的 v-model 属性，说明页面节点由 Vue 动态渲染。如果直接在全局脚本执行阶段调用 Autocomplete 初始化方法，会因为输入框还未被挂载到真实 DOM 上，导致 jQuery 选择器匹配不到目标元素，插件绑定完全失效。
2. 匹配规则过于严格
   原配置的 lookupFilter 采用单词边界正则做匹配：

   var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
   

   该规则仅会命中“输入内容作为国家名开头单词”的场景，用户输入国家名中间片段（比如输"orra"匹配"Andorra"）时会被判定为无匹配，视觉上和“数组没有加载”的效果完全一致。
3. 空查询场景无兜底
   用户刚聚焦输入框、还没输入任何内容时，严格的正则规则无法适配空查询的匹配逻辑，会导致初始弹出层没有任何内容。

调整方案 #

• 把 Autocomplete 初始化逻辑移到 Vue 的 mounted 生命周期钩子中执行，确保输入框渲染完成后再做插件绑定，从根源解决选择器匹配失效的问题。
• 替换原有的严格正则匹配逻辑为简单的全局包含匹配，只要国家名的任意位置包含用户输入的字符串就算匹配，覆盖全部常规搜索场景：

  lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
      return suggestion.value.toLowerCase().indexOf(queryLowerCase) !== -1;
  }
  

• 补充空查询兜底逻辑：用户未输入内容时，默认展示全量国家数组作为初始补全结果，满足输入框聚焦即弹出全量列表的常规交互预期。

修复后可直接参考的代码 #

// 等Vue完全渲染页面后执行初始化
mounted() {
    // 原有数据源定义逻辑保持不变
    const countries = {
        "A2": "Andorra Test",
        "AE": "United Arab Emirates",
        "AF": "Afghanistan",
        "AG": "Antigua and Barbuda",
        "AI": "Anguilla" 
    }
    const countriesArray = $.map(countries, function (value, key) { 
        return { value: value, data: key }; 
    });

    // 初始化自动补全插件
    $('#autocomplete').autocomplete({
        lookup: countriesArray,
        // 修正后的宽松匹配逻辑
        lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
            return suggestion.value.toLowerCase().indexOf(queryLowerCase) !== -1;
        },
        onSelect: function(suggestion) {
            $('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
        },
        onInvalidateSelection: function() {
            $('#selction-ajax').html('You selected: none');
        }
    });
}

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