我在用jQuery UI Autocomplete plug-in。有没有办法在下拉结果中突出显示搜索字符序列?
例如,如果我有“foo bar”作为数据,我键入"foo“,我会在下拉列表中得到”foobar“,如下所示:
发布于 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(...)
中调用该函数一次。
现在,这是一个黑客攻击,因为:
这意味着如果你在同一页上有多个自动补全,它们都会得到相同的处理。css样式就可以解决这个问题。
...but它说明了主要的技术,并且它可以满足您的基本需求。
更新的工作示例:http://output.jsbin.com/qixaxinuhe
要保留匹配字符串的大小写,而不是使用键入字符的大小写,请使用以下行:
var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" +
"$&" +
"</span>");
换句话说,从上面的原始代码开始,您只需要用"$&"
替换this.term
。
编辑
上面的代码改变了页面上的每个自动完成小部件。如果您只想更改其中一个,请参阅以下问题:
发布于 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的回应的组合。
发布于 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
复制相似问题