Question

我的客户想要为他拥有的静态xml文件中的条目创建搜索表单，并且不想使用服务器端技术。他希望它只是在浏览器中使用javascript。我有什么工作，除了如果你搜索有很多匹配条目的东西，它会锁定浏览器一点。我怎么能阻止这个？这就是我所拥有的：

$(function(){
    var root, searchEvent = setTimeout(function(){}, 0);
    $.get('allitems.xml', function(xml){
        root = $(xml);
    });

    $('#search-field').on('keyup', function(e){
        clearTimeout(searchEvent);
        searchEvent = setTimeout($.proxy(function(){search($(this).val());}, this), 500);
    });

    function search(q){
        var results = 0;
        $('#searchResults').empty();

        root.find('Beskrivning').each(function(i, el){
            /*if(results > 9)
                return false;*/
            el = $(el);
            if(el.text().toLowerCase().indexOf(q) != -1){
                addToResults(el.parent());
                results++;
            }
        });
    }
    function addToResults(node){
        var div = $('<a>').attr(
                'href', 
                'http://www.pn-trading.se/Objekt/tabid/125/' +
                    (node.find('ID').text()) +
                    '/123055/auktion/' +
                    (node.find('paplatsnamn').text()) +
                    '/Default.aspx?tabselect=' +
                    (node.find('paplatsnamn').text())
            )
            .attr('target', '_blank')
            .addClass('sr-item')
            .append(
                $('<div>').addClass('sr-item-image').append(
                    $('<img>').attr(
                        'src', 
                        'http://www.pn-trading.se/Portals/0/' +
                            (node.find('katalog').text()) +
                            '/' + (node.find('bildnr').text()) + '-200.jpg'
                    )
                ),
                $('<div>').addClass('sr-item-details').append($('<div>').html(node.find('Beskrivning').text()))
            );
        $('#searchResults').append(div);
    }
});

它本质上如何工作是我抓取并缓存xml文件，并在keyup事件中搜索xml文件。有关提高性能的任何提示吗？我知道在搜索之前我可能需要至少2-3个字符，甚至是分页，但如果可能的话，我宁愿远离这些选项。

此外，它需要与所有标准浏览器一起使用，包括＆gt; = IE7

Answer 1

您可以执行“增量”搜索，将其与计时器分开。这样您的浏览器就不会冻结。

Answer 2

在文本框旁边添加<button>search</button>，仅在点击它时进行搜索，而不是在每个密钥发布时进行搜索。

Answer 3

有一件事是，你在循环中使用了很多.find（），这本身并不是很好。您可以编写一个小型jQuery插件来大幅改进。

http://jsperf.com/node-vs-double-select/3

另一件事是，你可以动态地将xml转换为json，将其存储在局部变量中并搜索它。阅读页面，了解他们如何处理studentlitteratur.se上的相同问题

http://www.thomasfrank.se/xml_to_json.html

您可以选择一个插件，它允许您指定要在转换中包含哪些节点，哪些节点不包括在内。

然后，为了进一步优化它，您可以使用Modernizr检测WebWorker支持并将作业传递给Web worker。但只有浏览器支持它。

Answer 4

我只能通过在每次按键后重置计时器来解决这个问题，这会在一段时间后延迟搜索，例如200-300ms。一旦用户停止输入片刻，搜索就会执行。

使用javascript搜索2000+ xml记录会锁定浏览器

4 个答案: