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

閑話不多說直接上代碼

本文使用到的文件有：

1，點擊 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>  

使用方法：

定義一個id 為query的文本框

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

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

剛才提到 'QueryServices.ashx'  這個文件 這就是后臺處理數據的文件

因為這個插件要求返回結果必須是一個JSON對象 這個JSON對象的格式是這樣的

{  
 query:'Li', //前臺輸入的查詢內容  
 suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'],//這里就是下拉框里顯示的數據了 和下面的data是對應的 屬于一鍵一值  
 data:['LR','LY','LI','LT']//這里和suggestions對應 作為suggestions的鍵  
} 

suggestions 對應前臺 onAutocompleteSelect =function(value, data) 回調函數的 value 而

data 顧名思義 對應data

插件介紹到此為止  數據傳送格式已和大家 列出大家可根據自己所用語言自行序列化。

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

【編輯推薦】

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