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

そして、それは毎回それを見ていないので、あなたは、keyUpイベントハンドラの前に変数としてol.pacientesを定義することができ、各関数で、変数内の検索：

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