Javascript 如何在不使用Ajax的情况下在表单中添加一个简单的完整功能？

我想为我的用户创建一个表单，其中显示一个包含10个元素/字符串的下拉列表（我可以不使用Ajax提供），我只想在用户尝试填充表单时，该列表应该弹出，并允许用户从下拉列表中添加一个元素/字符串

我看过jquery的autocomplete插件，但是它包含了很多我不会使用的特性，而且因为它太重了。。。我正在寻找一个插件，轻，正好适合我的要求

提前感谢。

使用

更新：：您可以自定义jQuery UI，同时仅针对自动完成进行优化。

使用

更新：：您可以自定义jQuery UI，同时仅针对自动完成进行优化。

已完成。它不需要ajax。只是加载时初始化的字符串数组。从jQueryUI网站

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

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>

$（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
$（“#标记”）.autocomplete({
资料来源：availableTags
});
});
标签：

此功能的jQuery UI插件总容量为38KB。

已经完成。它不需要ajax。只是加载时初始化的字符串数组。从jQueryUI网站

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

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>

$（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
$（“#标记”）.autocomplete({
资料来源：availableTags
});
});
标签：

---

此功能的jQuery UI插件总容量为38KB。

以下两篇文章介绍自动完成的纯Javascript（无jQuery）方法：

使用带有

列表的文本框存储/显示选项的简单解决方案：

更复杂的示例提供更多定制（包括模糊/聚焦/鼠标事件处理程序）：

---

以下两篇文章展示了自动完成的纯Javascript（无jQuery）方法：

使用带有

列表的文本框存储/显示选项的简单解决方案：

更复杂的示例提供更多定制（包括模糊/聚焦/鼠标事件处理程序）：

---

第二段说他不想使用jQuery。。。。因为它“太重了”。只加载autocomplete（好吧，加上UI核心）是不可能的（或者至少不应该是这样）。。。。因为它“太重了”。仅仅加载autocomplete（加上UI核心）是不可能的（或者至少不应该这样）。