平時(shí)用百度，谷歌搜索的時(shí)候，會(huì)有一個(gè)下，拉列表進(jìn)行提示，這是一個(gè)非常好的功能。本文要介紹的這個(gè)JQuery 插件名叫Ajax Autocomplete 顧名思義，ajax 也就是用ajax的方式獲取搜索提示信息然后返回呈現(xiàn)出來，上效果圖

閑話不多說直接上代碼

本文使用到的文件有：

1，點(diǎn)擊 Ajax Autocomplete for jQuery, version 1.1.3  下載

引用文件：

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>  
<script type="text/javascript" src="jquery.autocomplete.js"></script>  

使用方法：

定義一個(gè)id 為query的文本框

<input type="text" name="query" id="query" /> 

<script type="text/javascript">  
        $(function() {  
            var onAutocompleteSelect =function(value, data) {  　　  
 　　　　　　　　　　//根據(jù)返回結(jié)果自定義一些操作  
            };   
            var options = {  
                serviceUrl: 'QueryServices.ashx',//獲取數(shù)據(jù)的后臺(tái)頁面  
                width: 700,//提示框的寬度  
                delimiter: /(,|;)\s*/,//分隔符  
                onSelect: onAutocompleteSelect,//選中之后的回調(diào)函數(shù)  
                deferRequestBy: 0, //單位微秒  
                params: { country: 'Yes' },//參數(shù)  
                noCache: false //是否啟用緩存 默認(rèn)是開啟緩存的  
            };  
 
            a1 = $('#easyQuery').autocomplete(options);  
                          
        });  
}  
    </script>  
 

剛才提到 'QueryServices.ashx'  這個(gè)文件 這就是后臺(tái)處理數(shù)據(jù)的文件

因?yàn)檫@個(gè)插件要求返回結(jié)果必須是一個(gè)JSON對(duì)象 這個(gè)JSON對(duì)象的格式是這樣的

{  
 query:'Li', //前臺(tái)輸入的查詢內(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ù)自己所用語言自行序列化。

原文鏈接：http://www.cnblogs.com/maxiao/archive/2012/04/25/2470712.html

【編輯推薦】

1. jQuery代碼優(yōu)化之基本事件
2. 10個(gè)jQuery的語言翻譯插件推薦
3. 一些非常棒的jQuery拖放插件
4. Jscex+jQuery UI打造游戲力度條
5. 10條建議讓你創(chuàng)建更好的jQuery插件