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