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

是否有任何灵活但简单的自动完成JavaScript代码?,javascript,autocomplete,Javascript,Autocomplete,自动完成似乎是网站上的标准工具。令人惊讶的是,在互联网上很难找到现成的解决方案。我对守则有一些基本要求: 我只想看到那些从类型符号开始的单词(而不是那些包含中间某个类型子字符串的单词) 我希望能够设置下拉菜单中的最大字数 我希望能够设置drop dawn菜单的样式(背景颜色、键入的子字符串颜色、单词其余部分的颜色) 必须从web服务器请求建议的单词(我不想一次加载所有可能的值,因为这将是一个巨大的值数组) 只有一个示例文件,我可以复制到我的服务器上,看看它是否工作(然后我可以开始修改它,将我的内

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

  • 我只想看到那些从类型符号开始的单词(而不是那些包含中间某个类型子字符串的单词)
  • 我希望能够设置下拉菜单中的最大字数
  • 我希望能够设置drop dawn菜单的样式(背景颜色、键入的子字符串颜色、单词其余部分的颜色)
  • 必须从web服务器请求建议的单词(我不想一次加载所有可能的值,因为这将是一个巨大的值数组)
  • 只有一个示例文件,我可以复制到我的服务器上,看看它是否工作(然后我可以开始修改它,将我的内容放在那里,并设置我的样式)
  • 我是很想知道还是互联网上有什么东西

    添加:

    正如第一个答案所表明的那样,存在一个问题。我已经设法使它起作用了。然而,这并非微不足道,因为代码是在上下文之外给出的。首先,我不清楚我需要把这个代码放在哪里(头?、身体?)。然后,如果我把它放在身体里,只有在我把这些东西放在头上之后,它才会开始工作:

    <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> 
    
    
    
    页面上没有写我需要使用这行代码来工作。我从提供自动完成示例的页面头部复制了这行内容


    此外,由于自动完成搜索包含类型化子字符串的所有单词(我需要从类型化子字符串开始的单词),因此我仍然存在这个问题。

    如果jQuery作为库是一个选项,那么UI插件提供了一个很好的自动完成功能

    这个演示怎么样:

    此外,由于自动完成搜索包含类型化子字符串的所有单词(我需要从类型化子字符串开始的单词),所以我仍然存在这个问题

    为此,您需要实现自己的源参数实现。文档说明您可以指定以下内容作为源:

    • 包含本地数据的数组
    • 指定URL的字符串
    • 回拨

    既然您希望建议的单词来自服务器,那么应该使用第二个选项(为JSONP指定URL)。这允许您处理“我需要从键入的子字符串开始的单词”部分。

    最后一个不清楚。首先,您可能至少需要一个JavaScript文件和一个服务器端文件。您是指实现API的服务器端语言源文件(如果是,是什么语言?)?如果它是一个静态数据文件,则与4相矛盾。静态数据文件需要JavaScript来下载所有可能的内容。@Matthew Flaschen,我明白这一点。让我纠正一下。我想使用JavaScript,我对与页面一起加载的autocomplete数据没有意见(因此,没有Ajax),我仍然希望有一个完整的html示例页面,其中包含工作代码(对于“为什么”,您可以看到我对原始问题的扩展)。您刚才添加的代码正在加载所有内容,包括厨房水槽。您只需要jquery.min.js、jquery-ui.min.js和一个定制的css(创建一个)。所有这些东西都在脑袋里。其他代码行(包装在
    $(document).ready()
    )放入脚本标记中,脚本标记本身可以放在任何地方。谢谢您的回答。我已经扩展了我的答案,以便对您提出的解决方案提供反馈。