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" />

按 Ctrl+C 複製代碼

按 Ctrl+C 複製代碼

 

下面就是後臺獲取數據的代碼了

剛纔提到 '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

插件介紹到此爲止  數據傳送格式已和你們 列出你們可根據本身所用語言 自行 序列化