如何創建一個實時搜索欄？

-1

如何創建與現有超鏈接圖像進行交互的實時搜索欄（鍵入時進行搜索）？繼承人微軟油漆圖像來解釋我想說的：http://i.imgur.com/TPboNCy.png

我真的希望你們知道我在說什麼，我找到了關於如何創建實時搜索，顯示搜索結果正確的教程（有點像一個下拉菜單），但我還沒有找到任何教程解釋如何使用實時搜索欄與現有超鏈接圖像進行交互（縮小結果中的圖像數量）。

2015-12-02 K.Bayyari

這正是你正在尋找的：http://www.sitepoint.com/jquery-filter-images/ – Matheno

我會檢查出來，MHakvoort。謝謝。 –

歡迎來到Stack Overflow！預計你至少試圖爲自己編碼。堆棧溢出不是代碼寫入服務。我建議你做一些額外的研究，無論是通過谷歌或通過搜索，做一個嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

根據你想要使用的特定目標和庫，不同的實現將是最好的。這個問題相當模糊，所以很難給你提供建議。

基本上，你的選擇是：

從頭開始重新繪製圖像列表時不同的畫面設置過濾器字符串相匹配。
首先顯示所有圖像。當搜索字符串更改時，隱藏不適合搜索的圖像並顯示適合的圖像。

第二個似乎更適合你的問題，實施起來更簡單，所以我將在這裏提供一個解決方案的例子。只是HTML/JavaScript，沒有圖書館。

HTML：

<form id="filter_form"> 
    <p>Search:</p> 
    <input id="filter" name="filter" type="text" size="40" onkeyup="filter_pictures();"></input> 
</form> 
<p> 
    <img class="filtered" src="url1"></img> 
    <img class="filtered" src="url2"></img> 
    <img class="filtered" src="url3"></img> 
</p>

的Javascript：

function filter_pictures() { 
    var $i = 0; 

    //Get the text we use to filter 
    var $filter = document.getElementById('filter').value; 

    //Get all images 
    var $imgsCollection = document.getElementsByClassName('filtered'); 

    //For every image check if url has filter in it and hide/show as needed. 
    for ($i = 0; $i < $imgsCollection.length; $i++) { 
     if ($imgsCollection[$i].getAttribute('src').indexOf($filter) > -1) { 
      $imgsCollection[$i].style.display = 'block'; 
     } else { 
      $imgsCollection[$i].style.display = 'none'; 
     } 
    } 
}

根據特定的目標，你可以賺更多的事件觸發的過濾功能（不只是的onkeyup）。

如果您想要重繪圖路線，可以將圖像url存儲在數組中，根據過濾器檢查該數組，然後構建html，包括匹配的圖像並將其分配給div的innerHTML屬性。你應該像示例中那樣按照相同的方式開火。

來源

2015-12-02 14:13:21

如何創建一個實時搜索欄？

回答

相關問題