1

我的客户想要为他拥有的静态 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 个字符，但如果可能的话，我宁愿远离这些选项。

此外，它需要适用于所有标准浏览器，包括 >= IE7

4

4 回答 4

0

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

于 2013-03-06T22:00:24.850 回答
0

<button>search</button>在文本框旁边添加一个，仅在单击它时搜索，而不是在每次按键释放时搜索。

于 2013-03-06T22:24:32.667 回答
0

一件事是，您在循环中使用了很多 .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。但前提是浏览器支持它。

于 2013-03-07T05:51:35.680 回答
0

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

于 2013-04-26T06:02:30.323 回答