官網：jQuery plugin: Autocomplete
（注：此插件已經不再更新。它的繼任者是jQuery UI的一部分，）
此插件依賴於 jquery 1.2.6 --- jquery 1.8.3
1、jquery.autocomplete API
語法： autocomplete(url/data, [options] )
參數： url / data：url或者數組 [options]：可選項
2、[options]：可選項，選項解釋如下：
minChars: 0, //至少輸入的字符數，default：1；如果設為0，在輸入框內雙擊或者刪除內容時顯示列表。 width: 220, //下拉框的寬度，default：input元素的寬度 max: 10, //下拉項目的個數，default：10 scrollHeight: 300, // 下拉框的高度， Default: 180 scroll: true, //當結果集大於默認高度時，是否使用滾動條，Default: true multiple: false, //是否允許輸入多個值. Default: false autoFill: false, // 是否自動填充. Default: false multipleSeparator: " ", //輸入多個字符時,用來分開各個的字符. Default: "," matchCase:false, //是否開啟大小寫敏感 selectFirst:true, // 如果設置成true,下拉列表的第一個值將被自動選擇, Default: true matchSubset:true, //是否啟用緩存 cacheLength: 10, //緩存的長度.即緩存多少條記錄.設成1為不緩存.Default: 10 delay: 20, //擊鍵后的延遲時間(單位毫秒).Default: 遠程為400 本地10 mustMatch:false, //如果設置為true,只會允許匹配的結果出現在輸入框,當用戶輸入的是非法字符時,將被清除， Default: false matchContains:true, //決定比較時是否要在字符串內部查看匹配.Default: false formatItem: function(row, i, max) { } //結果中的每一行都會調用這個函數,返回值將用LI元素包含,顯示在下拉列表中. 三個參數(row, i, max): 返回的結果數組, 當前處理的行數(從1開始), 當前結果數組元素的個數. Default: none, 表示不指定自定義的處理函數. formatResult : function(row, i, max) { } //和formatItem類似,但可以將將要輸入到input文本框內的值進行格式化.同樣有三個參數,和formatItem一樣.Default: none,表示要么是只有數據,要么是使用formatItem提供的值. formatMatch: function(row) { } //對每一行數據使用此函數格式化需要查詢的數據格式. 返回值是給內部搜索算法使用的. 參數值row result (function(event, data, formatted){}) //此事件會在用戶選中某一項后觸發，參數為：event: 事件對象, data: 選中的數據行,formatted:formatResult函數返回的值; 例如： $("#d").result(function(event, data, formatted){alert(formatted);}) extraParams (Object): //為后台(一般是服務端的腳本)提供更多的參數.和通常的作法一樣是使用一個鍵值對對象.如果傳過去的值是{ bar:4 },將會被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假設當前用戶輸入了foo). Default: {}
3、實例： 實例下載
<!DOCTYPE HTML > <html> <head> <title>jquery.autocomplete.js 實例</title> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery.js"></script> <script type='text/javascript' src='js/jquery.autocomplete.js'></script> <link rel="stylesheet" type="text/css" href="css/main.css" /> <link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" /> <style type="text/css"> p{margin:8px;} </style> </head> <body> <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/">jQuery Autocomplete Plugin</a> Demo</h1> <div id="content"> <form autocomplete="off"> <p> <label>City1:</label> <input type="text" id="city1" /> </p> <p> <label>City2:</label> <input type="text" id="city2" /> </p> <p> <label>Tags:</label> <input type="text" id='tags' /> </p> <p> <label>E-Mail:</label> <input type="text" id="email" /> </p> </form> <h3>Result:</h3> <ol id="result"></ol> </div> </body> </html> <script type="text/javascript"> $(function() { var cities = [ "Aberdeen", "Ada", "Beaverdam", "Bedford","Cuyahoga Falls", "Dayton", "De Graff", "Fairfield", "Fairpoint", "Groveport", "Grover Hill","Hamden", "Hamersville", "Irondale", "Ironton", "Jacksontown","Kirby", "Kirkersville", "Lafayette", "Lafferty", "Munroe Falls", "Murray City", "Oberlin", "Oceola", "Paris", "Parkman", "Ravenna", "Rawson", "Saint Louisville", "Toledo", "Tontogany", "Wakeman", "Walbridge", "Yorkshire", "Yorkville", "Zoar" ]; var emails = [ { name: "Peter Pan", to: "peter@pan.de" }, { name: "Molly", to: "molly@yahoo.com" }, { name: "Forneria Marconi", to: "live@japan.jp" }, { name: "Master <em>Sync</em>", to: "205bw@samsung.com" }, { name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" }, { name: "Don Corleone", to: "don@vegas.com" }, { name: "Mc Chick", to: "info@donalds.org" }, { name: "Donnie Darko", to: "dd@timeshift.info" }, { name: "Quake The Net", to: "webmaster@quakenet.org" }, { name: "Dr. Write", to: "write@writable.com" } ]; $("#tags").autocomplete(["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"]); $("#city1").autocomplete(cities); $("#city2").autocomplete(cities, { minChars: 0, //至少輸入的字符數，default：1； width: 220, //下拉框的寬度，default：input元素的寬度 max: 10, //下拉項目的個數，default：10 scrollHeight: 300, // 下拉框的高度， Default: 180 scroll: true, //當結果集大於默認高度時，是否使用滾動條，Default: true multiple: false, //是否允許輸入多個值. Default: false }); $("#email").autocomplete(emails, { minChars: 0, width: 310, matchContains: "word", autoFill: false, formatItem: function(row, i, max) { return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]"; }, formatMatch: function(row, i, max) { return row.name + " " + row.to; }, formatResult: function(row) { return row.to; } }); function log(event, data, formatted) { $("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result"); } $(":text").result(log) //被選中的插入Result }); </script>
參考：http://www.cnblogs.com/dongqi/archive/2010/04/06/1705510.html
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete