Tempo de leitura: menos de 1 minuto
Um dia desses, peguei uma estória para desenvolver, era a construção uma nova tela. A mesma tinha que ser capaz de listar várias informações tabuladas, aqui no trabalho chamados de grid.
Essa tela também teria o recurso de filtro, ou seja, uma campo InputText, com um botão Pesquisa, assim o usuário seria capaz de reduzir o número de resultados da pesquisa, retornando apenas o relevante para ele.
Desenvolvi a tela conforme solicitado na estória, mas vi que o resultado não havia ficado muito legal, pois a tela não dava ao usuário a certeza que os itens no grid tinham haver com o critério de pesquisa que ele havia informado.
Foi aí que um amigo do trabalho sugeriu, porque não destacamos as palavras usada para pesquisa, no grid de resultado? Encarei o desafio. Pesquisei no Google e encontrei algumas formas de faze-lo. Optei em fazer usando jQuery.
Depois de algumas customizações, chegamos ao código jQuery abaixo para resolver o problema:
[code language=”javascript”]
// recupera a palavra (termo) pesquisado
var inputValue = jQuery("input.filterGrid").val();
// verifica se o usuário digitou alguma palavra no inputText
if (inputValue) {
// guarda o termo pesquisa em caixa baixa
var termoPesquisa = inputValue.toLowerCase();
//para cada uma das linhas do grid
jQuery("td.grid").each(function () {
var thiz = jQuery(this)
// adiciono a class css highlightMatched
thiz.addClas("highlightMatched")
// no texto do grid, identifico onde inicia a palavra pesquisada
var matchStart = thiz.text().toLowerCase().indexOf("" + termoPesquisa + ""); //posição inicial termo pesquisado
//se a posição for diferente de -1 (encontrou a palavra) e texto diferente de vazio
if (matchStart != -1 && thiz.text() != "") {
// procuro onde o palavra termina
var matchEnd = matchStart + termoPesquisa.length – 1; // posição final termo pesquisado
// tendo as posições inicial e final em mãos, encontro os textos anterior,
// posterior e o próximo texto pesquisado, para que possa reescreve los com o destaque.
var beforeMatch = thiz.text().slice(0, matchStart); // texto antes do termo pesquisado
var matchText = thiz.text().slice(matchStart, matchEnd + 1); // texto termo pesquisado
var afterMatch = thiz.text().slice(matchEnd + 1); // texto depois do termo pesquisado
// por fim reescrevo o texto na célula do grid, adicionando a tag "<em>"entre a palavra pesquisada
thiz.html(beforeMatch + "<em>" + matchText + "</em>" + afterMatch);
}
});
}
[/code]
Pronto, basta agora escrever o css que destacará a palavra pesquisada, o css é simples:
[code language=”css”]
.highlightMatched em {
background: #ffff66; //cor amarela
font-weight: bold; //negrito
font-style: normal;
}
[/code]
Eis o resultado final:
Espero que tenham gostado!
