jQuery自動完成喜歡Facebook的當前城市和家鄉

Question

我將如何去產生一個自動完成的輸入字段，如截圖（從Facebook）中的一個？我需要用戶能夠輸入以縮小選擇範圍，然後選擇一個選項。

Answer 1

如果我想使用原生HTML5

---

http://7.mshcdn.com/wp-content/uploads/2011/01/html5-logo-1.jpg
如果你想使用HTML5，而不是jQuery，這裏是它的一個快速瀏覽：

Enter your favorite cartoon character: <br> 
<input type="text" name="favCharacter" list="characters"> 
    <datalist id="characters"> 
     <option value="Homer Simpson"> 
     <option value="Bart"> 
     <option value="Fred Flinstone"> 
    </datalist> 
Blah blah blah blah blah blah blah blah blah... 

哇！非常簡單，但它只適用於HTML5瀏覽器（反IE）。

http://www.quackit.com/html_5/tags/html_datalist_tag.cfm

---

如果我想使用jQuery

如果你使用jQuery，你可以在jQuery UI的事情：

http://fuelyourcoding.com/files/jqueryui.jpg

http://jqueryui.com/demos/autocomplete/

<script> 
    (function(){ 
     var tags = [ 
      "Java", 
      "JavaScript", 
      "ActionScript", 
      "C++" 
     ] 
     $("#tags").autocomplete({ 
      source: tags 
     }); 
    })(); 
</script> 
<div class="ui-widget"> 
    <label>Tags: <input id="tags"></label> 
</div> 

直播演示：http://jsfiddle.net/DerekL/PbjqM/

現在，你甚至不需要任何第三方插件！

耶！^_^