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

Jquery脚本冻结浏览器但工作

3 个答案: