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