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);