JQuery 插件之Ajax Autocomplete（ajax自動完成）

 

平時用百度，谷歌搜索的時候 會有一個下 拉列表進行提示 這是一個非常好的功能 本文要介紹的這個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

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