Question

自动完成似乎是网站上的标准工具。令人惊讶的是，很难在互联网上找到一个现成的解决方案。我对代码有一些基本要求：

我想只看到那些从输入符号开始的单词（不是那些在中间某处包含类型substring的单词）。
我希望能够在drop-dawn菜单中设置最大字数。
我希望能够设置drop-dawn菜单的样式（背景颜色，键入的子字符串颜色，其余颜色）。
必须从网络服务器请求建议的字词（我不想一次加载所有可能的值，因为它将是一个巨大的数组值。）
只有一个示例文件我可以复制到我的服务器并看到它有效（然后我可以开始修改它以放置我的内容并设置我的风格）。

我想要在互联网上有什么或者有什么东西吗？

增加：

正如第一个答案所示，有一个solution provided by JQuery。我设法让它发挥作用。然而，这并非易事，因为代码是在上下文之外给出的。首先，我不清楚我需要把这个代码放在哪里（头？，身体？）。然后，如果我把它放在体内，它只有在我把这些东西放到头上之后才开始工作：

<link rel="stylesheet" href="/css/base.css" type="text/css" media="all" /> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />       
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript"></script> 
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script> 
<script src="/js/demos.js" type="text/javascript"></script> 
<script src="/themeroller/themeswitchertool/" type="text/javascript"></script>

我没有在页面上写下我需要使用这些代码来使代码工作。我从页面的头部复制了这些行，提供了自动完成的示例。

此外，我仍然遇到问题，因为自动完成搜索所有包含类型子字符串的单词（我需要从输入的子字符串开始的单词）。

Answer 1

如果jQuery是库的选项，那么UI插件提供了很好的自动完成功能。

jQuery UI autocomplete

Answer 2

这个演示怎么样：

http://jsbin.com/oniji4

此外，我仍然遇到问题，因为自动完成搜索所有包含类型子字符串的单词（我需要从输入的子字符串开始的单词）。

为此，您需要实现自己的source参数实现。文档说明您可以指定以下内容：

包含本地数据的数组
一个String，指定一个URL
a Callback

现在你说你想要建议的单词来自服务器，你应该使用第二个选项（为JSONP指定一个URL）。这允许您处理“我需要从键入的子字符串开始的单词”部分。

是否有任何灵活但简单的自动完成JavaScript代码？

2 个答案: