我正在使用jQuery UI Autocomplete插件。有没有办法在下拉结果中突出显示搜索字符序列?
例如,如果我将“ foo bar”作为数据并输入“ foo ”,则在下拉菜单中将获得“ foo bar”,如下所示:
我正在使用jQuery UI Autocomplete插件。有没有办法在下拉结果中突出显示搜索字符序列?
例如,如果我将“ foo bar”作为数据并输入“ foo ”,则在下拉菜单中将获得“ foo bar”,如下所示:
Answers:
是的,如果您是自动完成猴子补丁程序,则可以。
在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(...)
。
现在,这是一个hack,因为:
有一个为列表中呈现的每个项目创建的regexp obj。该正则表达式obj应该重新用于所有项目。
没有用于完成部分格式的css类。这是一种内联样式。
这意味着,如果您在同一页面上有多个自动完成功能,则他们都会得到相同的待遇。CSS样式可以解决这个问题。
...但是它说明了主要技术,并且可以满足您的基本要求。
更新的工作示例:http : //output.jsbin.com/qixaxinuhe
要保留匹配字符串的大小写(与使用键入字符的大小写相反),请使用以下行:
var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" +
"$&" +
"</span>");
换句话说,从上面的原始代码开始,您只需要替换this.term
为"$&"
。
编辑
上面的内容更改了页面上的每个自动完成窗口小部件。如果您只想更改一个,请参阅以下问题:
如何仅修补页面上的一个*自动完成实例?
var re = new RegExp(this.term, "i");
很棒的帖子!
这也可以:
$.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örnZaefferer和@Cheeso的回应的结合。
$().autocomplete()
超级有帮助。谢谢。+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();
它是一个完整的功能示例:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Autocomplete - jQuery</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label for="search"></label>
<input type="text" name="search" id="search" />
</form>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function(){
$.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);
};
var availableTags = [
"JavaScript",
"ActionScript",
"C++",
"Delphi",
"Cobol",
"Java",
"Ruby",
"Python",
"Perl",
"Groove",
"Lisp",
"Pascal",
"Assembly",
"Cliper",
];
$('#search').autocomplete({
source: availableTags,
minLength: 3
});
});
</script>
</body>
</html>
希望这可以帮助
jQueryUI 1.9.0更改了_renderItem的工作方式。
下面的代码考虑了此更改,还显示了我如何使用JörnZaefferer的jQuery Autocomplete插件进行高亮匹配。它将突出显示整个搜索词中的所有单个词。
自从使用Knockout和jqAuto以来,我发现这是一种更加轻松的结果样式样式。
function monkeyPatchAutocomplete() {
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
// Escape any regex syntax inside this.term
var cleanTerm = this.term.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
// Build pipe separated string of terms to highlight
var keywords = $.trim(cleanTerm).replace(' ', ' ').split(' ').join('|');
// Get the new label text to use with matched terms wrapped
// in a span tag with a class to do the highlighting
var re = new RegExp("(" + keywords + ")", "gi");
var output = item.label.replace(re,
'<span class="ui-menu-item-highlight">$1</span>');
return $("<li>")
.append($("<a>").html(output))
.appendTo(ul);
};
};
$(function () {
monkeyPatchAutocomplete();
});
.jqAutocompleteMatch { font-weight: bold; }
this.term
在执行任何处理之前,应使用一些逻辑来转义for regex。有关如何执行此操作的众多答案之一,请参见在Javascript正则表达式中使用转义字符串。
为了更简单的方法,请尝试以下操作:
$('ul: li: a[class=ui-corner-all]').each (function (){
//grab each text value
var text1 = $(this).text();
//grab user input from the search box
var val = $('#s').val()
//convert
re = new RegExp(val, "ig")
//match with the converted value
matchNew = text1.match(re);
//Find the reg expression, replace it with blue coloring/
text = text1.replace(matchNew, ("<span style='font-weight:bold;color:green;'>") + matchNew + ("</span>"));
$(this).html(text)
});
}
这是Ted de Koning解决方案的重述。这包括 :
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
var sNeedle = item.label;
var iTermLength = this.term.length;
var tStrPos = new Array(); //Positions of this.term in string
var iPointer = 0;
var sOutput = '';
//Change style here
var sPrefix = '<strong style="color:#3399FF">';
var sSuffix = '</strong>';
//Find all occurences positions
tTemp = item.label.toLowerCase().split(this.term.toLowerCase());
var CharCount = 0;
tTemp[-1] = '';
for(i=0;i<tTemp.length;i++){
CharCount += tTemp[i-1].length;
tStrPos[i] = CharCount + (i * iTermLength) + tTemp[i].length
}
//Apply style
i=0;
if(tStrPos.length > 0){
while(iPointer < sNeedle.length){
if(i<=tStrPos.length){
//Needle
if(iPointer == tStrPos[i]){
sOutput += sPrefix + sNeedle.substring(iPointer, iPointer + iTermLength) + sSuffix;
iPointer += iTermLength;
i++;
}
else{
sOutput += sNeedle.substring(iPointer, tStrPos[i]);
iPointer = tStrPos[i];
}
}
}
}
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + sOutput + "</a>")
.appendTo(ul);
};
这是一个不需要任何正则表达式并且与标签中的多个结果匹配的版本。
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
var highlighted = item.label.split(this.term).join('<strong>' + this.term + '</strong>');
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + highlighted + "</a>")
.appendTo(ul);
};
看看combobox演示,它包括结果突出显示:http : //jqueryui.com/demos/autocomplete/#combobox
那里使用的正则表达式也处理html结果。
这是我的版本:
function highlightText(text, $node) {
var searchText = $.trim(text).toLowerCase(),
currentNode = $node.get(0).firstChild,
matchIndex,
newTextNode,
newSpanNode;
while ((matchIndex = currentNode.data.toLowerCase().indexOf(searchText)) >= 0) {
newTextNode = currentNode.splitText(matchIndex);
currentNode = newTextNode.splitText(searchText.length);
newSpanNode = document.createElement("span");
newSpanNode.className = "highlight";
currentNode.parentNode.insertBefore(newSpanNode, currentNode);
newSpanNode.appendChild(newTextNode);
}
}
$("#autocomplete").autocomplete({
source: data
}).data("ui-autocomplete")._renderItem = function (ul, item) {
var $a = $("<a></a>").text(item.label);
highlightText(this.term, $a);
return $("<li></li>").append($a).appendTo(ul);
};
您可以使用以下代码:
lib:
$.widget("custom.highlightedautocomplete", $.ui.autocomplete, {
_renderItem: function (ul, item) {
var $li = $.ui.autocomplete.prototype._renderItem.call(this,ul,item);
//any manipulation with li
return $li;
}
});
和逻辑:
$('selector').highlightedautocomplete({...});
它创建可以覆盖_renderItem
而不覆盖的自定义窗口小部件_renderItem
原始插件原型的。
在我的示例中,还使用了原始渲染功能来简化代码
如果您想在不同位置使用具有不同自动完成功能的视图的插件,并且不想破坏您的代码,这很重要。
如果您改用第3方插件,则该插件有一个突出显示的选项:http : //docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions
(请参见“选项”标签)