検索でコンテンツをフィルタリングする

Question

私のウェブサイトに複数のdivがあり、コンテンツを検索してそれらをフィルタリングできる必要があります。

検索では、div内の見出しを探し、divを非表示にする必要があります。どの見出しにも検索ボックス内のフレーズは含まれません。さらに、キーボードのESCキーを押すか、検索ボックスの右側にある小さなxボタンを押すと、検索がエスケープされます。 xボタンは、検索を使用しているときにのみ表示されます。

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

My検索ボックスは次のように表示され、下の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> 

問題を、好ましくはjQueryまたはPHPで解決するにはどのような方法が良いでしょうか？

Answer 1

EDIT：入力変更にも対応する機能を適用しました。

すべてこれをチェックしてください...基本検索フィルタリング。あなたの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/