一、首先了解下autocomplete 提供的重要屬性:
1. autoFocus:當智能提示框出現時,是否自動選中第一項,默認爲false,即不選中。
2. delay:在按鍵後執行搜索的延時,默認爲300ms。
3. disabled:是否禁用自動完成功能,默認爲false。
4. minLength:觸發自動完成功能需要輸入的最小字符數量。
5. source:即爲指定智能提示下拉框中的數據來源,支持三種類型。
Array,主要用於本地化數據提供,支持兩種格式:字符串數 組 [ "Choice1", "Choice2" ]及標籤和值屬性的Json格式數 組 [ { label: "Choice1", value: "value1" }, ... ]
String,用於ajax請求的遠程地址鏈接,返回Array或Json格式字符串。
Function,回調函數,最具有靈活性的一種方式,可用於返回任何數據源方式來實現自動完成,其中包含兩個參數request,response通過request.term 來獲取用戶輸入的值,通過response(argument)來對獲取的數據源進行顯示。
二、JQuery UI還提供了一些有用的方法:
1. close():關閉智能提示選擇框。
2. destroy():銷燬智能提示選擇框,將其所產生的元素完全刪除,使其恢復至初始狀態。
3. disable():禁用自動完成功能。
4. enable():開啓自動完成功能。
三、主要事件包括:
1. change(event, ui):當值改變時發生,ui.item爲選中的項。
2. close(event, ui):當智能提示框關閉時發生。
3. create(event, ui):當智能提示框創建時發生,可以在此事件中,對外觀進行一些控制。
4. focus(event, ui):當智能提示列表任意一項獲得焦點時發生,ui.item爲獲得焦點的項。
5. open(event, ui):當智能提示框打開或更新時發生。
6. response(event,ui):在搜索完成後智能提示框顯示前發生,可以在此事件中對顯示項進行處理。
7. search(event, ui): 在開始請求之前發生,可以在此事件中返回false來取消請求。
8. select(event, ui):當智能提示框中任意一項被選中時發生,ui.item爲選中的項。
常用有ui.item.id,ui.item.value和ui.item.label
一般顯示事例比較簡單,這裏提供一個返回二維數組 的 php版:
$(document).ready(function(){
/**/
var auserUrl = web_url ;
var sKey = $('#suid').val();
$('#suid').autocomplete({
source:function(request, response){
// $.getJSON(auserUrl, request, function(data, status, xhr){
$.ajax({
url:auserUrl,
type:'POST',
dateType:'json',
data:{'sKey':request.term},
success:function(data, textStatus,jqSHR){
data = eval("("+data+")");
//通過map函數重新生成規定結構數組並返回
response($.map(data, function(item, index){
// return item.aname;
return {
label: item.aname,
value: item.aname,
id:item.id
}
}
));
}
})
},
select: function( event, ui ) {
// 獲取選中項對應的id
$('#h_suid').val(ui.item.id);
//console.log(ui.item.id);
}
});
}