Estou usando o plug-in de preenchimento automático da interface do usuário do jQuery . Existe uma maneira de destacar a sequência de caracteres de pesquisa nos resultados suspensos?
Por exemplo, se eu tiver "foo bar" como dados e digitar "foo", obterei " foo bar" no menu suspenso, assim:
Respostas:
Sim, você pode, se fizer o patch automático do macaco.
No widget de preenchimento automático incluído na v1.8rc3 da interface do usuário do jQuery, o pop-up de sugestões é criado na função _renderMenu do widget de preenchimento automático. Esta função é definida assim:
_renderMenu: function( ul, items ) {
var self = this;
$.each( items, function( index, item ) {
self._renderItem( ul, item );
});
},A função _renderItem é definida assim:
_renderItem: function( ul, item) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
},Portanto, o que você precisa fazer é substituir o _renderItem fn pela sua própria criação que produz o efeito desejado. Essa técnica, redefinindo uma função interna de uma biblioteca, aprendi a chamar -se patch de macaco . Aqui está como eu fiz isso:
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 );
};
}Chame essa função uma vez $(document).ready(...).
Agora, isso é um hack, porque:
há um objeto regexp criado para cada item renderizado na lista. Esse objeto regexp deve ser reutilizado para todos os itens.
não há classe css usada para a formatação da peça concluída. É um estilo embutido.
Isso significa que, se você tivesse vários preenchimentos automáticos na mesma página, todos receberiam o mesmo tratamento. Um estilo css resolveria isso.
... mas ilustra a técnica principal e funciona para seus requisitos básicos.
exemplo de trabalho atualizado: http://output.jsbin.com/qixaxinuhe
Para preservar o caso das cadeias de correspondência, em vez de usar o caso dos caracteres digitados, use esta linha:
var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" +
"$&" +
"</span>");Em outras palavras, a partir do código original acima, basta substituir this.termpor "$&".
EDITAR
O texto acima altera todos os widgets de preenchimento automático na página. Se você deseja alterar apenas uma, consulte esta pergunta:
Como corrigir * apenas uma * instância do preenchimento automático em uma página?
var re = new RegExp(this.term, "i"); Ótimo post!
isso também funciona:
$.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);
};uma combinação das respostas de @ Jörn Zaefferer e @ Cheeso.
$().autocomplete()
Super útil. Obrigado. +1.
Aqui está uma versão light que classifica "String deve começar com o termo":
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();Aqui está, um exemplo completo funcional:
<!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>Espero que isto ajude
O jQueryUI 1.9.0 altera como o _renderItem funciona.
O código abaixo leva essa alteração em consideração e também mostra como eu estava realizando a correspondência de destaque usando o plug-in de preenchimento automático do jQuery de Jörn Zaefferer. Ele destacará todos os termos individuais no termo geral da pesquisa.
Desde que passei a usar o Knockout e o jqAuto, achei uma maneira muito mais fácil de estilizar os resultados.
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.termregex for deve ser usada antes de qualquer processamento. Consulte String de escape para uso em regex Javascript como uma das muitas respostas sobre como fazer isso.
para uma maneira ainda mais fácil, tente o seguinte:
$('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)
});
}Aqui está uma nova versão da solução de Ted de Koning. Inclui :
$.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);
};Aqui está uma versão que não requer expressões regulares e corresponde a vários resultados no rótulo.
$.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);
};Dê uma olhada na demonstração da caixa combinada, que inclui os resultados destacados: http://jqueryui.com/demos/autocomplete/#combobox
O regex em uso lá também lida com resultados html.
Aqui está a minha versão:
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);
};você pode usar o seguinte código:
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;
}
});e lógica:
$('selector').highlightedautocomplete({...});ele cria um widget personalizado que pode substituir _renderItemsem substituir_renderItem protótipo do plug-in original.
no meu exemplo também usou a função de renderização original para simplificar o código
é importante se você deseja usar o plug-in em locais diferentes, com diferentes visões do preenchimento automático e não deseja quebrar seu código.
Se você usar o plug-in de terceiros, ele terá uma opção de destaque: http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions
(consulte a guia Opções)