jQuery 如何格式化 JQueryUI 自动完成响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7292462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to format JQueryUI autocomplete response?
提问by rickypai
I am trying to make an autocomplete widget that will display the name and a short description of the matched item.
我正在尝试制作一个自动完成小部件，它将显示匹配项目的名称和简短描述。
For example, if I type "America" it will show "North America- The northern subcontinent of the Americas." and "South America- The southern subcontinent of the Americas."
例如，如果我输入“America”，它将显示“North America- The Northern subcontinent of the Americas”。和“南美洲——美洲的南部次大陆”。
I have successfully made it so my database will return the appropriate JSON response with id,value (name of the item, eg. North America, and desc (short description eg. 'The northern subcontinent...'), I just need help to format the returned results as
我已经成功做到了，所以我的数据库将返回适当的 JSON 响应，其中包含 id、value（项目名称，例如北美和 desc（简短描述，例如“北部次大陆...”），我只需要帮助将返回的结果格式化为
<li><strong>value<strong><br><p>desc</p></li>
instead of just
而不仅仅是
<li>value</li>
<li>value</li>
Thanks a lot in advance.
非常感谢。
P.S. I have been trying to look for an answer on Stack Overflow, but the answers I've found involve formatResult and other methods that are no longer supported.
PS 我一直试图在 Stack Overflow 上寻找答案，但我发现的答案涉及 formatResult 和其他不再受支持的方法。
回答by Rezler
http://jqueryui.com/demos/autocomplete/#custom-data- is the custom data example on the jquery ui site what you're trying to achieve?
http://jqueryui.com/demos/autocomplete/#custom-data- jquery ui 站点上的自定义数据示例是您要实现的目标吗？
回答by bingjie2680
this may be of help,look at the .data():
这可能有帮助，看看.data()：
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
回答by Derrick
You should be able to use the following RegEx to achieve the result you are looking for.
您应该能够使用以下 RegEx 来实现您正在寻找的结果。
item.label.replace(new RegExp('(' + term + ')', 'ig'), function (, match) {
return '<strong>' + match + '</strong>';
});
The full example is below.
完整示例如下。
$("#project").autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
var term = this.term,
formattedLabel = item.label.replace(new RegExp('(' + term + ')', 'ig'), function (, match) {
return '<strong>' + match + '</strong>';
});
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + formattedLabel + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
