如何实现同时搜索国家代码与名称的jQuery Autocomplete自动补全？

没问题，我来帮你搞定这个双字段匹配的自动补全功能。你的需求是让输入的关键词能同时匹配CC（国家代码）和CN（国家名称），只需要调整现有代码里的判断逻辑，再优化下显示效果就行。

完整的代码实现 #

$(".typeahead").autocomplete({
    source: function (request, response) {
        // 创建安全的不区分大小写匹配正则，转义用户输入的特殊字符
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
        $.ajax({
            url: "places.json",
            dataType: "json",
            success: function (data) {
                response($.map(data, function(v, i){
                    // 核心逻辑：检查国家代码或名称是否匹配输入关键词
                    if (matcher.test(v.CC) || matcher.test(v.CN)) {
                        return {
                            // 下拉列表显示的文本，同时展示代码和名称，用户一目了然
                            label: `[${v.CC}] ${v.CN}`,
                            // 选中后填充到输入框的值，可根据需求修改（比如改成v.CC）
                            value: v.CN
                        };
                    }
                }));
            }
        });
    },
    // 可选：选中条目时的自定义行为（比如想填充完整的代码+名称可以用这个）
    select: function(event, ui) {
        // 示例：如果要把[CC] CN填充到输入框，取消默认行为后手动赋值
        // $(this).val(ui.item.label);
        // event.preventDefault();
    }
});

关键逻辑说明 #

1. 双字段匹配：
   核心判断条件matcher.test(v.CC) || matcher.test(v.CN)实现了「只要国家代码或名称任意一个匹配输入关键词，就把该条目加入自动补全结果」的需求。

2. 安全的正则匹配：
   使用$.ui.autocomplete.escapeRegex转义用户输入的特殊字符（比如*、?这类正则符号），避免出现正则表达式注入的问题，保证匹配的安全性和准确性。

3. 优化显示体验：
   把label设置为[${v.CC}] ${v.CN}的格式，用户在下拉列表里能同时看到代码和名称，清楚知道匹配的是哪个字段；而value是选中后输入框最终显示的内容，你可以根据业务需求改成v.CC或者其他格式。

可选优化建议 #

• 如果你的places.json数据量很大，建议把搜索逻辑放到后端处理（比如接口接收关键词后返回匹配的结果），减少前端的计算压力；数据量小的话，前端过滤完全够用。
• 如果需要「仅匹配字段开头」的效果（比如输入Aa只匹配以Aa开头的代码或名称），可以修改正则为：

  var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
  

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