JQuery скрипт замораживает браузер, но работает - PullRequest
Новая
       18

JQuery скрипт замораживает браузер, но работает

0 голосов
/ 11 февраля 2012

Я пытаюсь сделать живой поиск для своего мобильного веб-сайта, я не хочу запрашивать базу данных каждый раз, когда пользователь печатает письмо, поэтому я создал упорядоченный список со всеми именами, которые можно искать, и яЯ зацикливаюсь на 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);
        });

Ответы [ 3 ]

0 голосов
/ 11 февраля 2012

Вы можете изменить каждый на: 

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

Помимо того, что короче, единственным улучшением будет установка содержимого $('#pacientes_hint') только в конце, что может помочь.

Дайте мне знать, если вам нужно более креативное решение.

0 голосов
/ 11 февраля 2012

Прежде всего, вы можете переместить #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 как переменную перед обработчиком ключей, поэтому он не ищет егокаждый раз и в каждой функции ищите внутри переменной: 

$(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);
0 голосов
/ 11 февраля 2012

Использовать версию автозаполнения jQuery. Вы можете загрузить массив со всеми своими именами и передать его автозаполнению, которое будет работать на лету.

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

...