谷歌快速搜索自帶大量自動(dòng)完成插件——庫中甚至還有一個(gè)附帶的jQuery UI共享選項(xiàng)。然而今天我要尋找一個(gè)替代的解決方案。由DevBridge開發(fā)的jQuery Autocomplete插件有確切的功能，我覺得非常有吸引力。你在打字的時(shí)候，結(jié)果將出現(xiàn)在下拉菜單底部，自動(dòng)突出顯示的詞語。本教程簡單介紹了通過加載JavaScript數(shù)組的內(nèi)容運(yùn)行這個(gè)插件。從后端文件加載Ajax內(nèi)容或者從數(shù)據(jù)庫中加載文本內(nèi)容都是可行的，在本教程中，更容易使用本地?cái)?shù)據(jù)。查看以下演示，了解這個(gè)插件 吧。
創(chuàng)建頁面
首先下載jQuery Autocomplete插件，這里使用的是壓縮后的版本，以及最新的jQuery腳本的副本。因?yàn)槲以贘avaScript數(shù)組里保留了所有選擇項(xiàng)，于是將自定義腳本移動(dòng)到了另一個(gè)單獨(dú)的文件中。
<!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都是通用的，你可以在頁面中執(zhí)行任何類型的搜索設(shè)計(jì)，結(jié)果都將正常工作。我使用外容器，ID #searchfield，整體格式置于中央。沒有提交按鈕，但結(jié)果將自動(dòng)出現(xiàn)在輸入的動(dòng)態(tài)文字段下方。
<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定義目標(biāo)段落，不需要多余的HTML，因?yàn)樗械倪x擇項(xiàng)都將以JS代碼呈現(xiàn)。另外一個(gè)有趣的段落是使用ID #outputcontent。在這段里我們可以放置用戶選項(xiàng)。通常情況下，是將用戶重新定向到一個(gè)搜索頁面上，或者轉(zhuǎn)到主頁面本身。
利用CSS
在這里我不贅述細(xì)節(jié)了，但要注意每個(gè)選擇功能項(xiàng)的CSS樣式設(shè)計(jì)，來搭配主要輸入?yún)^(qū)域。邊框和內(nèi)容樣式在Design Shack搜索欄中有詳細(xì)描述，可以直接借鑒。每個(gè)選項(xiàng)樣式是基于默認(rèn)代碼的，我已經(jīng)復(fù)制到我的樣式表里了。
.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; }
如果你想保持在一個(gè)單獨(dú)的樣式表，它仍然通過加載就行了。不過我嘗試了對(duì)資源進(jìn)行整合，從而減少瀏覽器發(fā)出的HTTP請(qǐng)求。頭兩類是針對(duì)整個(gè)彈出選擇行，以 及每個(gè)內(nèi)部選擇行。你可以把它們的風(fēng)格改造成任何適合你網(wǎng)站的樣式。伴隨CSS還有精心挑選的元素類，用于突出顯示已經(jīng)由用戶輸入的文本內(nèi)容。
#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;
}
無論你怎樣設(shè)計(jì)，搜索區(qū)域本身不會(huì)有什么不一樣的問題。jQuery Autocomplete插件適合任意寬度的搜索區(qū)域，所有選擇項(xiàng)都能以同樣的布局整潔排列呈現(xiàn)出來。我的設(shè)計(jì)確實(shí)占用了大量頁面上的空間，但這個(gè)插件能 幫助改善修復(fù)這個(gè)不完美的地方，而我不需要自定義太多內(nèi)容。
實(shí)現(xiàn)自動(dòng)完成
如果你使用的是后端Ajax調(diào)用來獲取數(shù)據(jù)結(jié)果，那 么你需要執(zhí)行自己的搜索功能了。jQuery Autocomplete識(shí)別某些可響應(yīng)數(shù)據(jù)，例如XML/JSON，然后由PHP, Rails, Python, ASP.NET等返回。因此，通常情況是通過搜索你的數(shù)據(jù)庫表中的條目，并拉出所有相關(guān)站點(diǎn)和它們的網(wǎng)址，然后把列表返回到你的瀏覽器。我用 JavaScript所創(chuàng)建的條目行是世界各地主要貨幣，當(dāng)你輸入國家或者貨幣名字的時(shí)候，你會(huì)看到一個(gè)選擇項(xiàng)目清單從數(shù)組直接拉出。我復(fù)制了一小部分內(nèi) 容來演示它是如何完成的。
$(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運(yùn)行你自定義功能之前，以下內(nèi)容還需要完成。我選擇的是保持陣列和自定義函數(shù)調(diào)用存儲(chǔ)在同一個(gè)JS文件中。不過 你可以選擇獨(dú)立的函數(shù)數(shù)據(jù)，將它們移動(dòng)到不同的兩個(gè)文件。現(xiàn)在自動(dòng)完成插件只需要少量的默認(rèn)代碼。我復(fù)制了模板以及在線演示，你可以查看我用相同的參數(shù)能 夠做到哪些。
$('#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);
}
});
查找參數(shù)僅用于本地?cái)?shù)據(jù)，并且我們的目標(biāo)是一個(gè)數(shù)組時(shí)。每當(dāng)用戶選擇一個(gè)選項(xiàng)時(shí)onSelect將觸發(fā)一個(gè)新的函數(shù)。以下的在線演示中我們簡單的創(chuàng)建一個(gè)新的HTML字符串輸出選定的名字和值。請(qǐng)注意，下面的演示只是最基本的例子，你還可以加以擴(kuò)展。到j(luò)Query Autocomplete documentation上面看看有什么關(guān)于其他參數(shù)的好點(diǎn)子。我只是略懂皮毛，那些JavaScript開發(fā)人員能把函數(shù)調(diào)用例子放在一起。我想說的是這個(gè)插件很好獲得，大家都可以使用，在必要情況下，甚至能使用靜態(tài)數(shù)據(jù)。
后續(xù)
我本人非常推薦這個(gè)插件，之前我已經(jīng)使用了幾個(gè)不同的解決方案，但都沒有這個(gè)插件好用。通過加載頁面結(jié)果呈現(xiàn)選項(xiàng)與直接搜索結(jié)果兩者之間有很大區(qū)別（比如 Google Instant）。在使用這款插件之前，首先要確保你有一個(gè)很好的計(jì)劃，構(gòu)建工作性能良好的用戶界面。jQuery Autocomplete插件完全免費(fèi)的，所有代碼都在MIT license提供出來了。
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。