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

Question

我从DevBridge获得了Autocomplete 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"
  • "Creastwich,Westerlyn"
• 如果我选择"Eastcliffe,Westwood",那么我的onSelect函数应该运行,但文本框的值仍应保持为Eastcliffe.

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

Answer 1

你可以使用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/