搜索下拉建議

Question

有沒有更好的方法來建立一個輸入框與下面的建議下拉列表的下拉列表？

<div id="dropdown-group" class="input-group dropdown"> 
    <input id="keyword" type="search" class="form-control"> 

    <ul id="suggestion-list" class="dropdown-menu"> 
     <li> 
      <a href="link"> 
       <img class="img-sm" src="img_path"> 
       <span>name</span> 
      </a> 
     </li> 
    </ul> 
</ul> 

input-group，dropdown，form-control和dropdown-menu都引導類。 我使用vuejs和ajax填寫用戶在搜索輸入字段（#keyword）中鍵入的無序列表（#suggestion-list）。 我也聽輸入丟失和獲得焦點，我添加和刪除引導類open打開和關閉下拉列表。我故意跳過那個javascript的代碼來關注html和css。

缺少什麼是當按下箭頭鍵瀏覽建議列表的功能。

有沒有更好的方法來設計這樣一個列表？

Answer 1

this怎麼樣。在行動中看到它here。不管你想做什麼，總會有人做得更聰明，更快。