通過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. 
    }); 
});