像facebook当前城市和家乡一样的jQuery Autocomplete

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/

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

  

耶！ ^ _ ^