jQuery - DevBridge 自动完成 - 更改建议格式

Question

我已经从 DevBridge 获得了自动完成 jQuery 插件，它或多或少地按照我想要的方式工作。请在此处查看小提琴： https://jsfiddle.net/shalan/bcex6oaq/。这是一个简单的郊区和城市查找，用户开始输入他/她的郊区，自动完成显示相关建议。当用户进行选择时，它会自动填充下面的 2 个只读文本框，其中包含相关的城市和邮政编码。数据结构如下所示：

var suburbData = [
    {"value":"Eastcliffe", "data":{"city":"Westwood","code":"23145"}},    
    {"value":"Creastwich","data":{"city":"Westerlyn","code":"66365"}},    
    {"value":"South Woodbury Island","data":{"city":"Fairmoor","code":"89798"}},    
    {"value":"Faighcastle","data":{"city":"Westwood","code":"23144"}},
    {"value":"Brightkeep","data":{"city":"Merrowshore","code":"08872"}},    
    {"value":"Summerbank","data":{"city":"Wyvernfield","code":"10467"}},    
];

虽然效果很好，但我想将建议列表的格式设置为：Suburb, City，但在调用自动​​完成功能的文本框中保留Suburb 值。

示例：

• 如果我开始输入ea，它应该会显示：
  • “伊斯特克利夫，韦斯特伍德”
  • “韦斯特林克雷斯特威奇”
• 如果我选择“Eastcliffe, Westwood”，我的 onSelect 函数应该会运行，但文本框的值仍应保持为 Eastcliffe。

如何以这种方式格式化建议列表？

Answer 1

你可以使用Autocomplete.formatResult来做到这一点

试试这个 JS（查看演示以获取完整代码）

Autocomplete.formatResult = function (suggestion, currentValue) {
    var pattern = '(' + utils.escapeRegExChars(currentValue) + ')';

    return suggestion.value.replace(new RegExp(pattern, 'gi'), '<strong>$1<\/strong>')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/&lt;(\/?strong)&gt;/g, '<$1>') + " , " + suggestion.data.city;
};

Answer 2

您可以使用formatResult 函数，它允许您：

formatResult: function (suggestion, currentValue) {} 自定义函数 格式化建议容器内的建议条目，可选。

代码：

$(function() {
    $('#suburb').autocomplete({
        lookup: theData,
        minChars: 1,
        formatResult: function(suggestion, currentValue){
            return suggestion.value+','+suggestion.data.city;
        }
    });
});

演示：https://jsfiddle.net/j6r9ka6y/