Multipe JQuery在單個頁面中搜索

Question

我有一個頁面，最終將有10個不同的UL，每個LI中有多個DIV，每個LI都應該可以搜索到LI中的每個DIV。每個搜索框應該單獨搜索自己的UL，而不會影響頁面中的其他UL。我目前使用的解決方案是複製搜索代碼，同時以數字方式遞增選擇器。這會產生很多冗餘。

如何限制冗餘度並讓每個搜索仍然隻影響其自己的UL？

以下是遞增的代碼（僅而不是兩次所有10爲簡潔起見）：

的HTML：

<h1>Search One</h1> 
<input type="text" id="search1" value="" placeholder="enter search text" /> 

<div id="results1"> 
    <ul> 
    <li> 
     <div class="listing-three">Apple</div>| 
     <div class="listing-three">Banana</div>| 
     <div class="listing-three">Cherry</div> 
    </li> 
    <li> 
     <div class="listing-three">Apple</div>| 
     <div class="listing-three">Banana</div>| 
     <div class="listing-three">Cucumber</div> 
    </li> 
    <li> 
     <div class="listing-three">Apple</div>| 
     <div class="listing-three">Berry</div>| 
     <div class="listing-three">Cheese</div> 
    </li> 
    </ul> 
</div> 
<h1>Search Two</h1> 
<input type="text" id="search2" value="" placeholder="enter search text" /> 

<div id="results2"> 
    <ul> 
    <li> 
     <div class="listing-three">Apple</div>| 
     <div class="listing-three">Banana</div>| 
     <div class="listing-three">Cherry</div> 
    </li> 
    <li> 
     <div class="listing-three">Apple</div>| 
     <div class="listing-three">Banana</div>| 
     <div class="listing-three">Cucumber</div> 
    </li> 
    <li> 
     <div class="listing-three">Apple</div>| 
     <div class="listing-three">Berry</div>| 
     <div class="listing-three">Cheese</div> 
    </li> 
    </ul> 
</div> 

jQuery的

$("#search1").keyup(function() { 
    var searchText = $(this).val().toLowerCase(); 
    $("#results1 li").each(function() { 
    console.log($(this).text()); 
    var string = $(this).text().toLowerCase(); 
    if (string.indexOf(searchText) != -1) { 
     $(this).show("slow"); 
    } else { 
     $(this).hide("slow"); 
    } 
    }); 
}); 

$("#search2").keyup(function() { 
    var searchText = $(this).val().toLowerCase(); 
    $("#results2 li").each(function() { 
    console.log($(this).text()); 
    var string = $(this).text().toLowerCase(); 
    if (string.indexOf(searchText) != -1) { 
     $(this).show("slow"); 
    } else { 
     $(this).hide("slow"); 
    } 
    }); 
}); 

爲了便於解釋和清晰的功能，我添加了小提琴。

https://jsfiddle.net/MercyMayaGames/1pbwc98j/

Answer 1

在輸入框中，給一個屬性來表示的，其列出它是

<input type="text" id="search1" value="" placeholder="enter search text" class="searcher" data-search-in="results1"/> 

通知最後兩個屬性class和data-search-in

現在你可以重構代碼爲

$(".searcher").keyup(function() { 
    var searchText = $(this).val().toLowerCase(); 
    var searchIn = $(this).attr("data-search-in"); 
    $("#" + searchIn + " li").each(function() { 
    console.log($(this).text()); 
    var string = $(this).text().toLowerCase(); 
    if (string.indexOf(searchText) != -1) { 
     $(this).show("slow"); 
    } else { 
     $(this).hide("slow"); 
    } 
    }); 
}); 

Answer 2

//$("#search2").keyup(function() { 
$(".search").keyup(function() { 
    var searchText = $(this).val().toLowerCase(); 
    $(this).find("+ .results li").each(function() { 
    console.log($(this).text()); 
    var string = $(this).text().toLowerCase(); 
if (string.indexOf(searchText) != -1) { 
    $(this).show("slow"); 
} else { 
    $(this).hide("slow"); 
} 
    }); 
}); 

我已經改變#search2與.search，這意味着你還應該添加一個類search到您所有的搜索框。同樣，您需要將results類添加到所有結果div。你可以根據你的選擇使用類名。

Answer 3

改爲使用類

<input type="text" class="search" value="" placeholder="enter search text" /> 

<div class="results"> 

.... 

作爲adeneo說或做的一個插件，你可以選擇如調用基於位置種

和目標元素在DOM

$(".search").on('keyup', function() { 
    var searchText = this.value.toLowerCase(); 

    $(this).next('.results').find('li').each(function() { 

     var string = $(this).text().toLowerCase(); 

     if (string.indexOf(searchText) != -1) { 
      $(this).show("slow"); 
     } else { 
      $(this).hide("slow"); 
     } 
    }); 
}); 

FIDDLE