通过搜索过滤内容

Question

我在我的网站上有多个div，需要能够通过搜索他们的内容来过滤它们。

该搜索应查找div中的标题并隐藏div，该标题不会在搜索框中包含该短语。此外，应该按下键盘上的ESC键或通过按下搜索框右侧的一个小按钮来搜索。 X按钮只显示在搜索中使用

<input type="search" placeholder="Search ..." /> 

我的搜索框看起来是这样的，应筛选下方的div。

<div> <h3>Red</h3> <p>Lorem ipsum dolor est</p> </div> 
<div> <h3>Green</h3> <p>Lorem ipsum dolor est</p> </div> 
<div> <h3>Blue</h3> <p>Lorem ipsum dolor est</p> </div> 
<div> <h3>Orange</h3> <p>Lorem ipsum dolor est</p> </div> 
<div> <h3>Yellow</h3> <p>Lorem ipsum dolor est</p> </div> 

什么是解决问题的最ellegant方式，最好的jQuery或PHP？

Answer 1

编辑：应用功能来处理输入变化以及。

好吧检查一下...基本搜索过滤。只需将适当的类添加到您的html，并运行此jQuery代码。这是我刚刚创建的小提琴。

var $searchContainer = $("#search"); 
 
var $contentBoxes = $searchContainer.find(".content"); 
 
var $searchInput = $searchContainer.find("#search-input"); 
 
var $searchBtn = $searchContainer.find("#search-btn"); 
 

 
$searchBtn.on("click", searchContent); 
 
$searchInput.on("input", searchContent); 
 

 
function searchContent() { 
 
    var userInput; 
 

 
    //Check if call comes from button or input change 
 
    if ($(this).is(":button")) { 
 
    userInput = $(this).siblings("input").val(); 
 
    } else { 
 
    userInput = $(this).val(); 
 
    } 
 

 
    //make the input all lower case to make it compatible for searching 
 
    userInput = userInput.toLowerCase(); 
 

 
    //Loop through all the content to find matches to the user input 
 
    $contentBoxes.each(function() { 
 

 
    var headerText = $(this).find(".title").text(); 
 
    var contentText = $(this).find(".description").text(); 
 
    //add the title and content of the contentbox to the searchable content, and make it lower case 
 
    var searchableContent = headerText + " " + contentText; 
 
    searchableContent = searchableContent.toLowerCase(); 
 

 
    //hide content that doesn't match the user input 
 
    if (!searchableContent.includes(userInput)) { 
 
     $(this).hide(); 
 
    } else { 
 
     $(this).show(); 
 
    } 
 

 
    }); 
 

 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="search"> 
 
    <form> 
 
    <input type="search" id="search-input" placeholder="Search ..." /> 
 
    <button id="search-btn" type="button">Search</button> 
 
    </form> 
 

 

 
    <div class="content"> 
 
    <h3 class="title">Red</h3> 
 
    <p class="description">Lorem ipsum dolor est</p> 
 
    </div> 
 
    <div class="content"> 
 
    <h3 class="title">Green</h3> 
 
    <p class="description">Lorem ipsum dolor est</p> 
 
    </div> 
 
    <div class="content"> 
 
    <h3 class="title">Blue</h3> 
 
    <p class="description">Lorem ipsum dolor est</p> 
 
    </div> 
 
    <div class="content"> 
 
    <h3 class="title">Orange</h3> 
 
    <p class="description">Lorem ipsum dolor est</p> 
 
    </div> 
 
    <div class="content"> 
 
    <h3 class="title">Yellow</h3> 
 
    <p class="description">Lorem ipsum dolor est</p> 
 
    </div> 
 

 

 

 
</div>

这里是一个小提琴，如果是这样更好:) https://jsfiddle.net/9p89034t/22/