jquery脚本冻结浏览器，但工作

Question

我想为我的移动网站进行实时搜索，我不想每次查询数据库时用户输入一个字母，所以我创建了一个有序列表，所有名称可以搜索，我用jQuery循环它，问题是，我有3300名称，它冻结浏览器，当它搜索它们时，任何人都可以给我一个关于更好的方法来做到这一点的提示？这里是我的代码：

$(document).ready(function(){ 
    $("input#search").keyup(function(){ 
     var filter = $(this).val(), count = 0; 
      var html = ""; 
     $("ol.pacientes li").each(function(){ 
        var nome_paciente = $(this).text(); 
        if(nome_paciente.indexOf(filter.toUpperCase()) != -1){ 
         html = html + " " + nome_paciente; 
        } 

        $('#pacientes_hint').html(html); 
     }); 

Answer 1

使用jQuery自动完成版本。你可以加载一个包含你所有名字的数组，并将它传递给自动完成，这将在飞行中起作用。

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

Answer 2

你可以改变你对每个：

var text = $("ol.pacientes li:contains(\""+filter.toUpperCase()+"\")").map(function() { 
    return $(this).text(); 
}).join(' '); 
$('#pacientes_hint').text(text); 

除了是较短的，唯一的改善将只在年底，这将有助于被设定$('#pacientes_hint')内容。

让我知道你是否需要更有创意的解决方案。

Answer 3

首先，您可以将#pacientes_hint移动到每个函数之外。

$(document).ready(function(){ 
$("input#search").keyup(function(){ 
    var filter = $(this).val(), count = 0; 
     var html = ""; 
    $("ol.pacientes li").each(function(){ 
       var nome_paciente = $(this).text(); 
       if(nome_paciente.indexOf(filter.toUpperCase()) != -1){ 
        html = html + " " + nome_paciente; 
       } // end if 


    }); // end each 
    $('#pacientes_hint').html(html); 

然后，您可以定义ol.pacientes作为KEYUP处理程序之前的变量，所以它不看它每次，并在每个函数，变量内搜索：

$(document).ready(function(){ 
var pacientes_list = $("ol.pacientes"); 
var pacientes_hint = $("#pacientes_hint"); 
$("input#search").keyup(function(){ 
    ... 
    $("li", $(pacientes_list)).each(function(){ // search in the container 
     ...  
    }); // end each 
    $(pacientes_hint).html(html);