平時(shí)用百度，谷歌搜索的時(shí)候，會(huì)有一個(gè)下，拉列表進(jìn)行提示，這是一個(gè)非常好的功能。本文要介紹的這個(gè)JQuery 插件名叫Ajax Autocomplete 顧名思義，ajax 也就是用ajax的方式獲取搜索提示信息然后返回呈現(xiàn)出來(lái)，上效果圖
閑話不多說(shuō)直接上代碼
本文使用到的文件有：
1，點(diǎn)擊 Ajax Autocomplete for jQuery, version 1.1.3 下載
引用文件：
-
-
使用方法：
定義一個(gè)id 為query的文本框
-
-
- $(function() {
- var onAutocompleteSelect =function(value, data) {
- //根據(jù)返回結(jié)果自定義一些操作
- };
- var options = {
- serviceUrl: 'QueryServices.ashx',//獲取數(shù)據(jù)的后臺(tái)頁(yè)面
- width: 700,//提示框的寬度
- delimiter: /(,|;)\s*/,//分隔符
- onSelect: onAutocompleteSelect,//選中之后的回調(diào)函數(shù)
- deferRequestBy: 0, //單位微秒
- params: { country: 'Yes' },//參數(shù)
- noCache: false //是否啟用緩存 默認(rèn)是開(kāi)啟緩存的
- };
-
- a1 = $('#easyQuery').autocomplete(options);
-
- });
- }
-
-
下面就是后臺(tái)獲取數(shù)據(jù)的代碼了
剛才提到 'QueryServices.ashx' 這個(gè)文件 這就是后臺(tái)處理數(shù)據(jù)的文件
因?yàn)檫@個(gè)插件要求返回結(jié)果必須是一個(gè)JSON對(duì)象 這個(gè)JSON對(duì)象的格式是這樣的
- {
- query:'Li', //前臺(tái)輸入的查詢(xún)內(nèi)容
- suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'],//這里就是下拉框里顯示的數(shù)據(jù)了 和下面的data是對(duì)應(yīng)的 屬于一鍵一值
- data:['LR','LY','LI','LT']//這里和suggestions對(duì)應(yīng) 作為suggestions的鍵
- }
suggestions 對(duì)應(yīng)前臺(tái) onAutocompleteSelect =function(value, data) 回調(diào)函數(shù)的 value 而
data 顧名思義 對(duì)應(yīng)data
插件介紹到此為止 數(shù)據(jù)傳送格式已和大家 列出大家可根據(jù)自己所用語(yǔ)言自行序列化。
原文鏈接：http://www.cnblogs.com/maxiao/archive/2012/04/25/2470712.html
網(wǎng)站標(biāo)題：jQuery插件之Ajax自動(dòng)完成
URL鏈接：
http://uogjgqi.cn/article/dhejhce.html
