如何自定义自动完成插件结果的格式？
我在用jQuery UI Autocomplete plug-in。有没有办法在下拉结果中突出显示搜索字符序列？
例如，如果我有“foo bar”作为数据，我键入"foo“，我会在下拉列表中得到”foobar“，如下所示：
回答 13
Stack Overflow用户
发布于 2010-03-13 07:13:16
是的，你可以，如果你的猴子补丁自动补全。
在jQuery UI的v1.8rc3中包含的自动完成小部件中，建议弹出窗口是在自动完成小部件的_renderMenu函数中创建的。此函数的定义如下：
_renderMenu: function( ul, items ) {
var self = this;
$.each( items, function( index, item ) {
self._renderItem( ul, item );
});
},_renderItem函数的定义如下：
_renderItem: function( ul, item) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
},因此，您需要做的是用您自己创建的能够产生所需效果的_renderItem fn替换它。我学到的这种在库中重新定义内部函数的技术称为。下面是我是如何做到的：
function monkeyPatchAutocomplete() {
// don't really need this, but in case I did, I could store it and chain
var oldFn = $.ui.autocomplete.prototype._renderItem;
$.ui.autocomplete.prototype._renderItem = function( ul, item) {
var re = new RegExp("^" + this.term) ;
var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" +
this.term +
"</span>");
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + t + "</a>" )
.appendTo( ul );
};
}在$(document).ready(...)中调用该函数一次。
现在，这是一个黑客攻击，因为：
- 为列表中呈现的每个项目创建了一个regexp对象。该regexp obj应该在所有项目中重用。
- 没有用于设置已完成零件格式的css类。这是一种内联样式。
这意味着如果你在同一页上有多个自动补全，它们都会得到相同的处理。css样式就可以解决这个问题。
...but它说明了主要的技术，并且它可以满足您的基本需求。
更新的工作示例：http://output.jsbin.com/qixaxinuhe
要保留匹配字符串的大小写，而不是使用键入字符的大小写，请使用以下行：
var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" +
"$&" +
"</span>");换句话说，从上面的原始代码开始，您只需要用"$&"替换this.term。
编辑
上面的代码改变了页面上的每个自动完成小部件。如果您只想更改其中一个，请参阅以下问题：
Stack Overflow用户
发布于 2010-08-11 19:29:10
这也是可行的：
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};@Jörn Zaefferer和@Cheeso的回应的组合。
Stack Overflow用户
发布于 2011-04-21 04:43:43
非常有帮助。谢谢。+1。
这是一个简单的版本，它对“字符串必须以术语开头”进行排序：
function hackAutocomplete(){
$.extend($.ui.autocomplete, {
filter: function(array, term){
var matcher = new RegExp("^" + term, "i");
return $.grep(array, function(value){
return matcher.test(value.label || value.value || value);
});
}
});
}
hackAutocomplete();https://stackoverflow.com/questions/2435964
复制相似问题
腾讯云开发者
