谷歌快速搜索自帶大量自動完成插件——庫中甚至還有一個附帶的jQuery UI共享選項。然而今天我要尋找一個替代的解決方案。由DevBridge開發的jQuery Autocomplete插件有確切的功能，我覺得非常有吸引力。你在打字的時候，結果將出現在下拉菜單底部，自動突出顯示的詞語。本教程簡單介紹了通過加載JavaScript數組的內容運行這個插件。從后端文件加載Ajax內容或者從數據庫中加載文本內容都是可行的，在本教程中，更容易使用本地數據。查看以下演示，了解這個插件 吧。
創建頁面
首先下載jQuery Autocomplete插件，這里使用的是壓縮后的版本，以及最新的jQuery腳本的副本。因為我在JavaScript數組里保留了所有選擇項，于是將自定義腳本移動到了另一個單獨的文件中。
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Input Autocomplete Suggestions Demo</title>
<link rel="shortcut icon" >
<link rel="icon" >
<link rel="stylesheet" type="text/css" media="all" href="style.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>
<script type="text/javascript" src="js/currency-autocomplete.js"></script>
</head>
安裝過程并不難，所有HTML都是通用的，你可以在頁面中執行任何類型的搜索設計，結果都將正常工作。我使用外容器，ID #searchfield，整體格式置于中央。沒有提交按鈕，但結果將自動出現在輸入的動態文字段下方。
<div id="content">
<h1>World Currencies Autocomplete Search</h1>
<p>Just start typing and results will be supplied from the JavaScript. Check out <a >jQuery Autocomplete</a> on Github.</a></p>
<div id="searchfield">
<form><input type="text" name="currency" class="biginput" id="autocomplete"></form>
</div><!-- @end #searchfield -->
<div id="outputbox">
<p id="outputcontent">Choose a currency and the results will display here.</p>
</div>
</div><!-- @end #content -->
我們可以通過使用ID #autocomplete定義目標段落，不需要多余的HTML，因為所有的選擇項都將以JS代碼呈現。另外一個有趣的段落是使用ID #outputcontent。在這段里我們可以放置用戶選項。通常情況下，是將用戶重新定向到一個搜索頁面上，或者轉到主頁面本身。
利用CSS
在這里我不贅述細節了，但要注意每個選擇功能項的CSS樣式設計，來搭配主要輸入區域。邊框和內容樣式在Design Shack搜索欄中有詳細描述，可以直接借鑒。每個選項樣式是基于默認代碼的，我已經復制到我的樣式表里了。
.autocomplete-suggestions { border: 1px solid #999; background: #fff; cursor: default; overflow: auto; }
.autocomplete-suggestion { padding: 10px 5px; font-size: 1.2em; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #f0f0f0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399ff; }
如果你想保持在一個單獨的樣式表，它仍然通過加載就行了。不過我嘗試了對資源進行整合，從而減少瀏覽器發出的HTTP請求。頭兩類是針對整個彈出選擇行，以 及每個內部選擇行。你可以把它們的風格改造成任何適合你網站的樣式。伴隨CSS還有精心挑選的元素類，用于突出顯示已經由用戶輸入的文本內容。
#searchfield { display: block; width: 100%; text-align: center; margin-bottom: 35px; }
#searchfield form {
display: inline-block;
background: #eeefed;
padding: 0;
margin: 0;
padding: 5px;
border-radius: 3px;
margin: 5px 0 0 0;
}
#searchfield form .biginput {
width: 600px;
height: 40px;
padding: 0 10px 0 10px;
background-color: #fff;
border: 1px solid #c8c8c8;
border-radius: 3px;
color: #aeaeae;
font-weight:normal;
font-size: 1.5em;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}
#searchfield form .biginput:focus {
color: #858585;
}
無論你怎樣設計，搜索區域本身不會有什么不一樣的問題。jQuery Autocomplete插件適合任意寬度的搜索區域，所有選擇項都能以同樣的布局整潔排列呈現出來。我的設計確實占用了大量頁面上的空間，但這個插件能 幫助改善修復這個不完美的地方，而我不需要自定義太多內容。
實現自動完成
如果你使用的是后端Ajax調用來獲取數據結果，那 么你需要執行自己的搜索功能了。jQuery Autocomplete識別某些可響應數據，例如XML/JSON，然后由PHP, Rails, Python, ASP.NET等返回。因此，通常情況是通過搜索你的數據庫表中的條目，并拉出所有相關站點和它們的網址，然后把列表返回到你的瀏覽器。我用 JavaScript所創建的條目行是世界各地主要貨幣，當你輸入國家或者貨幣名字的時候，你會看到一個選擇項目清單從數組直接拉出。我復制了一小部分內 容來演示它是如何完成的。
$(function(){
var currencies = [
{ value: 'Afghan afghani', data: 'AFN' },
{ value: 'Albanian lek', data: 'ALL' },
{ value: 'Algerian dinar', data: 'DZD' },
{ value: 'European euro', data: 'EUR' },
{ value: 'Angolan kwanza', data: 'AOA' },
{ value: 'East Caribbean dollar', data: 'XCD' },
...
{ value: 'Vietnamese dong', data: 'VND' },
{ value: 'Yemeni rial', data: 'YER' },
{ value: 'Zambian kwacha', data: 'ZMK' },
{ value: 'Zimbabwean dollar', data: 'ZWD' },
];
在jQuery運行你自定義功能之前，以下內容還需要完成。我選擇的是保持陣列和自定義函數調用存儲在同一個JS文件中。不過 你可以選擇獨立的函數數據，將它們移動到不同的兩個文件。現在自動完成插件只需要少量的默認代碼。我復制了模板以及在線演示，你可以查看我用相同的參數能 夠做到哪些。
$('#autocomplete').autocomplete({
lookup: currencies,
onSelect: function (suggestion) {
// some function here
}
});
// setup autocomplete function pulling from currencies[] array
$('#autocomplete').autocomplete({
lookup: currencies,
onSelect: function (suggestion) {
var thehtml = '<strong>Currency Name:</strong> ' + suggestion.value + ' <br> <strong>Symbol:</strong> ' + suggestion.data;
$('#outputcontent').html(thehtml);
}
});
查找參數僅用于本地數據，并且我們的目標是一個數組時。每當用戶選擇一個選項時onSelect將觸發一個新的函數。以下的在線演示中我們簡單的創建一個新的HTML字符串輸出選定的名字和值。請注意，下面的演示只是最基本的例子，你還可以加以擴展。到jQuery Autocomplete documentation上面看看有什么關于其他參數的好點子。我只是略懂皮毛，那些JavaScript開發人員能把函數調用例子放在一起。我想說的是這個插件很好獲得，大家都可以使用，在必要情況下，甚至能使用靜態數據。
后續
我本人非常推薦這個插件，之前我已經使用了幾個不同的解決方案，但都沒有這個插件好用。通過加載頁面結果呈現選項與直接搜索結果兩者之間有很大區別（比如 Google Instant）。在使用這款插件之前，首先要確保你有一個很好的計劃，構建工作性能良好的用戶界面。jQuery Autocomplete插件完全免費的，所有代碼都在MIT license提供出來了。
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。