通过HTML DOM进行JavaScript搜索快速输入时不起作用

Question

我对HTML页面中的元素执行了简单的JavaScript搜索。 除了当我键入快速搜索代码隐藏DOM中的每个元素并且什么都不显示时，一切正常。这是我的代码 http://codepen.io/anon/pen/ObvPmw

作为一个例子搜索单词lorem先慢慢再快。当我们快速搜索时，整个元素都会消失。 任何人都可以指出我在这里做错了吗？

Answer 1

嗯，我看着你的代码。由于您正在使用keyup事件来调用doSearch函数，同时您使用的是用于隐藏/显示数据的fadeIn函数。我想用一个示例来说明问题，当您键入任何字符时它将隐藏所有文本（对于一个很小的范围的时间），然后显示结果（基于doSearch函数）。所以，当你输入fast时，每次调用doSearch函数时都会调用doSearch函数，因此它会在空文本上调用doSearch函数（因为前面的调用不会返回结果，因为i-e文本仍然隐藏）。也许你需要绑定你的doSearch函数和某种限制，直到文本没有被显示，它将不会被调用。编辑：只需更改行数：
CharityNames.parents（“li”）。fadeIn（）; CharityText.parents（“li”）。fadeIn（）; 至 CharityNames.parents（“li”）。show（）; CharityText.parents（“li”）。show（）;

它会正常工作。但我不知道这是否是你的要求淡入文本。

Answer 2

这是一个建议，而不是你问题的解决方案，询问为什么你的代码不能按照你的预期工作。

你的逻辑看起来并不复杂，而且太多的函数调用会降低性能。

如果有兴趣，下面是一个小样本，它完全符合您的需求。 Working Example

//This is a extension to do case insensitive search. Extension Name "containsCIn" 
$.extend($.expr[':'], { 
    'containsCIn': function(elem, i, match, array) { 
    return (elem.textContent || elem.innerText || '').toLowerCase() 
     .indexOf((match[3] || "").toLowerCase()) >= 0; 
    } 
}); 

// this is the sample code which filters the content on search string 
$(function() { 
    $('#txtesearch').on('keyup', function() { 
    var searchtext = $(this).val(); 

    $('ul.charity-listing, ul.charity-listing li').hide(); 
    $('ul.charity-listing li:containsCIn("' + searchtext + '")').show(); 

    $('ul.charity-listing').fadeIn({duration: 200}); // default is 400, i reduced the time to make it render fast. 
    }); 
});