如何解决Ajax Autocomplete for jQuery部署中的报错问题？

问题根源 #

你返回的JSON结构不符合插件默认要求：插件默认期望每个suggestion对象包含**value（显示文本）和data**（附加数据）字段，但你的返回用了id和domain_name，导致插件读取默认字段时获取到undefined，触发replace和toLowerCase的未定义错误。

两种解决方法 #

方法1：调整后端JSON返回格式 #

改成插件默认兼容的结构：

{"suggestions": [{"value":"google.com","data":{"id":"166"}},{"value":"facebook.com","data":{"id":"167"}}]}

• value：下拉列表中显示的文本内容
• data：存储该选项的额外数据（如你的id）

方法2：前端配置字段映射 #

无需修改后端，在插件初始化时指定自定义字段：

$('#siteSearch').devbridgeAutocomplete({
    paramName: 'q',
    serviceUrl: '/ajax-autocomplete-search',
    // 指定用于显示的字段
    lookupKey: 'domain_name',
    // 自定义结果渲染（可选，若需要更复杂的显示）
    formatResult: function(suggestion, currentValue) {
        return suggestion.domain_name;
    },
    // 选中事件中使用自定义字段
    onSelect: function(suggestion) {
        console.log('选中ID：' + suggestion.id);
    }
});

错误原因说明 #

• 输入单个字符时的replace错误：插件默认调用_formatResult时尝试读取suggestion.value，该字段不存在导致undefined.replace报错
• 输入两个字符时的toLowerCase错误：插件执行findBestHint逻辑时，同样尝试读取suggestion.value，引发undefined.toLowerCase报错

调整后插件即可正确解析数据，错误会消失。

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