Existe alguma maneira de acelerar esta solução para um jQuery case-insensitive: contém seletor?

Question

este solução para um seletor jQuery :contains case-insensitive em StackOverflow. Ele funciona muito bem, no entanto, ele vem com o custo de desempenho. Alguém mais encontrar esta solução a ser um pouco lento?

Eu estou usando o seletor :contains para procurar uma mesa. O usuário digita uma seqüência de pesquisa em uma caixa de texto. Para cada keystroke, ele procura a tabela para aquela corda, mostrando apenas as linhas que contêm essa seqüência através do selector :contains. Antes de implementar a solução case-insensitive, esta pesquisa foi rápido e ágil. Agora, com esta solução, ele trava por um breve momento depois de cada tecla.

Algumas ideias sobre como esta solução poderia ser acelerado?

Answer 1

Eu encontrei outra solução da busca case-insensitive no Google (veja Eric Phan ) que varia ligeiramente do que eu estava originalmente usando.

Original:

return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;

EricPhan:

return (a.textContent || a.innerText || "").toLowerCase().indexOf(m[3].toLowerCase())>=0;

Comparando os dois, você pode ver a solução de Eric Phan acessa os atributos DOM diretamente e usos toLowerCase() vez de toUpperCase(). O último realmente não importa, mas o primeiro é o que realmente melhorou o desempenho da busca case-insensitive. Apenas mudando a solução original para uso (a.textContent || a.innerText || "") vez de jQuery(a).text() fez toda a diferença!

Agora eu sou um pouco curioso, então aqui está um acompanhamento pergunta: Qual é o negócio com jQuery.text()? Por que é tão lento? Eu tenho minhas suposições, mas eu adoraria ouvir o que os especialistas têm a dizer.

Por fim, obrigado a todos que responderam. I appreicate sua ajuda. =)

Answer 2

Você poderia tentar verificar o seletor apenas uma vez, depois que o usuário parou de escrever para um determinado período de tempo, e não para cada tecla pressionada.

Por exemplo, uma implementação simples:

Uso:

$("#textboxId").keyup(function () {
  typewatch(function () {
    // executed only 500 ms after the user stopped typing.
  }, 500);

Implementação:

var typewatch = function(){
    var timer = 0;  // store the timer id
    return function(callback, ms){
        clearTimeout (timer);  // if the function is called before the timeout
        timer = setTimeout(callback, ms); // clear the timer and start it over
    }  
}();

Answer 3

você poderia tentar não verificar após cada toque de tecla, mas talvez um segundo após o último toque de tecla foi pressionada. Desta forma, você não está constantemente verificando enquanto o usuário está digitando, mas sim verificar quando o usuário estiver concluído ou pausar digitação.

Answer 4

aqui está um acompanhamento pergunta: O que é o acordo com jQuery.text ()? Por que é isso tão lento?

Eu suspeito que ele é lento devido ao $(a) (convertendo o elemento DOM em um objeto jQuery) e não a .text().

Answer 5

Para adicionar ao que Jason disse, você pode tentar usar este plugin para conseguir isso.