如何在引導搜索框中添加來自單詞列表的建議

Question

我在我的代碼中使用了搜索框。

<form action="/search" method="post" role="form"> 
<div id="custom-search-input" style="height:41px"> 
<div class="input-group col-md-12" style="height:10px"> 
<input id="search" name="search" type="text" class="form-control input-lg" 
       placeholder="Search" style="font-size:14px;height:30px"/> 
<span class="input-group-btn"> 
    <button class="btn btn-info btn-lg" type="submit"> 
    <i class="glyphicon glyphicon-search" style="text-decoration:none"></i> 
     </button> 
     </span> 
     </div> 
    <div><label id="noresult"><i>No results found</i></label> 
    </div> 
    </div> 
    </form> 

現在我想自動建議添加到該搜索框一樣，如果你寫「一」開始顯示一切從「a」一樣google.Those建議可以從包含每一個可能的列表加載可以搜索的結果。

請幫我看看如何添加此功能。

Answer 1

只有使用HTML你不能這樣做。您需要使用javascript。

這是一個使用jquery的解決方案。

HTML

<input type="text" id="selector"> 

JS

var availableTags = [ 
    "ActionScript", 
    "AppleScript", 
    "Asp", 
    "BASIC", 
    "C", 
    "C++", 
    "Clojure", 
    "COBOL", 
    "ColdFusion", 
    "Cycle", 
    "Erlang", 
    "Fortran", 
    "Groovy", 
    "Haskell", 
    "Java", 
    "JavaScript", 
    "Lisp", 
    "Perl", 
    "PHP", 
    "Python", 
    "Ruby", 
    "Scala", 
    "Scheme"]; 
$("#selector").autocomplete({ 
    source: availableTags 
}); 

$('#selector').change(function() { 
    alert($('#selector').val()); 
}); 

使用這一點，你必須添加jquery和jquery-ui之前。

Demo here