通過搜索過濾內容

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/