如何將快速搜索功能添加到無序列表文本？

我有一個無序的名單與隱藏的溢出，使他們可以滾動。每個li都有一個嵌套圖像，其中包含名字和姓氏文本的跨度，以及之後顯示小圖標的鏈接。名單很長。我怎樣才能讓這個ul可以通過姓氏文本搜索（我假設 - 通過添加一個輸入），以便它根據姓氏中的第一個字母跳轉到列表中的名稱？香草的JavaScript選項請如何將快速搜索功能添加到無序列表文本？

HTML

<ul> 
<li><img class="makeIcon" src=""><span>FirstName LastName</span><a href="#"><img src=""> 
</a></li> 
....many of these 
</ul>

來源

2014-01-19 PhilD

也許你需要這個jQuery插件？ http://jqueryui.com/autocomplete/ –

這似乎在我的測試中工作。假設你的「ul」有一個唯一的ID。

我的香草js有點生鏽。我確信有更簡潔的方法來做到這一點。我爲「搜索術語」創建了一個var（用於測試目的），但正如您所說 - 您會從輸入中獲得值。

<ul id="searchList"> 
    <li><img class="makeIcon" src=""><span>Marko Pollo</span><a href="#"><img src=""></a></li> 
    <li><img class="makeIcon" src=""><span>Dr. Paul</span><a href="#"><img src=""></a></li> 
</ul> 


var ul_parent = document.getElementById('searchList'); 
var span_elements = ul_parent.getElementsByTagName("span"); 
var a_elements = ul_parent.getElementsByTagName("a"); 
var search_term = "Paul"; 
for (var i = 0, len = span_elements.length; i < len; i++) { 
    var lName = span_elements[i].innerHTML.replace(/\w+\s(\w+)$/, function(_, $1){ 
      return $1; 
    }); 
    if(search_term == lName){ 
     console.log('found match'); 
     a_elements[i].focus(); 
     // once a match is found, return false out or do something else. 
    } 
} // if you reach this point, you can add an else{} and alert user no matches

我沒加，但你可能希望走這條路線，以保持它的情況下不可知：.toLowerCase（），所以，這樣的：

search_term.toLowerCase() == lName.toLowerCase()

來源

2014-01-19 09:43:10

你可以使用span標籤或數據屬性的內容。

但是，你應該使用jQuery與顯示/隱藏方法和改變你的輸入事件。

它只需要幾行代碼，但一些插件可以做到這一點。

jQuery自動完成改變它的顯示方式。

來源

2014-01-19 09:03:30 Loenix

如何將快速搜索功能添加到無序列表文本？

回答

相關問題