是否有任何靈活但簡單的自動完成JavaScript代碼？

Question

自動完成功能似乎是網站上的標准工具。 令人驚訝的是，很難在Internet上找到現成的解決方案。 我對代碼有一些基本要求：

1. 我只想看那些從鍵入的符號開始的單詞（而不是那些在中間某處包含子字符串類型的單詞）。
2. 我希望能夠在下拉菜單中設置最大單詞數。
3. 我希望能夠設置下拉菜單的樣式（背景顏色，鍵入的子字符串的顏色，單詞其余部分的顏色）。
4. 必須從Web服務器請求建議的單詞（我不想一次加載所有可能的值，因為它將是一大堆值）。
5. 只有一個示例文件，我可以將其復制到服務器上並查看其工作原理（然后可以開始對其進行修改，以放置我的內容並設置我的樣式）。

我想要很多還是互聯網上有東西？

添加：

作為第一個答案， JQuery提供了一個解決方案 。 我設法使它起作用。 但是，這並非無關緊要，因為代碼是在上下文之外給出的。 首先，不清楚我需要在哪里放置此代碼（head？，body？）。 然后，如果將其放在體內，則只有在將這些東西放到頭部后，它才能開始工作：

<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自動完成

Answer 2

這個演示怎么樣：

http://jsbin.com/oniji4

而且，由於自動完成搜索所有包含類型化子字符串的單詞（我需要從類型化子字符串開始的單詞），所以我仍然遇到問題。

為此，您需要實現自己的source參數實現。 文檔說您可以指定以下內容作為源：

• 具有本地數據的數組
• 一個字符串，指定一個URL
• 回調

現在，您說希望建議的單詞來自服務器，您應該使用第二個選項（為JSONP指定URL）。 這樣就可以處理“我需要從鍵入的子字符串開始的單詞”部分。