JQuery UI之Autocomplete(1)

標籤：href   png   字元   focus   有用   nis   choice   事件   input   

1、Autocomplete的主要屬性：
source：即為指定智能提示下拉框中的資料來源，支援三種類型。
  Array，主要用於本地化資料提供，支援兩種格式：字串數組 [ "Choice1", "Choice2" ]及標籤和值屬性的Json格式數組 [ { label: "Choice1", value: "value1" }, ... ]
  String，用於ajax請求的遠程地址連結，返回Array或Json格式字串。
  Function，回呼函數，最具有靈活性的一種方式，可用於返回任何資料來源方式來實現自動完成，其中包含兩個參數request，response通過request.term 來擷取使用者輸入的值,通過response(argument)來對擷取的資料來源進行顯示。
autoFocus：當智能提示框出現時，是否自動選中第一項，預設為false，即不選中。
delay：在按鍵後執行搜尋的延時，預設為300ms。
disabled：是否禁用自動完成功能，預設為false。
minLength：觸發自動完成功能需要輸入的最小字元數量。

2、Autocomplete還提供了一些有用的方法：
close()：關閉智能提示選擇框。　　
destroy()：銷毀智能提示選擇框，將其所產生的元素完全刪除，使其恢複至初始狀態。
disable()：禁用自動完成功能。
enable()：開啟自動完成功能。

3、主要事件包括：
change(event, ui)：當值改變時發生，ui.item為選中的項。
close(event, ui)：當智能提示框關閉時發生。
create(event, ui)：當智能提示框建立時發生，可以在此事件中，對外觀進行一些控制。
focus(event, ui)：當智能提示列表任意一項獲得焦點時發生，ui.item為獲得焦點的項。
open(event, ui)：當智能提示框開啟或更新時發生。
response(event,ui)：在搜尋完成後智能提示框顯示前發生，可以在此事件中對顯示項目進行處理。
search(event, ui)： 在開始請求之前發生，可以在此事件中返回false來取消請求。
select(event, ui)：當智能提示框中任意一項被選中時發生，ui.item為選中的項。

4、Autocomplete程式入門

 首先引入相關的css和js檔案，HTML代碼

<link href="../css/jquery-ui.css" rel="stylesheet" /><script type="text/javascript" src="../js/jquery-1.9.1.min.js" ></script><script type="text/javascript" src="../js/jquery-ui.js"  ></script><label for="language">搜尋：</lable><input id="language" name="language" type="text">

這裡採用的是本機資料，js代碼如下：

$("#language").autocomplete({        source: [ ‘Chinese‘,‘English‘,‘Spanish‘,‘Russian‘,‘French‘,‘Japanese‘,‘Korean‘,‘German‘]    });

當輸入c時的效果如下：

5、source使用標籤和值屬性示範

HTML不變，js代碼如下：

$("#language").autocomplete({        // 靜態資料來源，根據label屬性進行顯示或模糊比對，當給輸入框設定value屬性值        source: [                 { label: "Chinese", value: 1 },                 { label: "English", value: 2 },                 { label: "Spanish", value: 3 },                 { label: "Russian", value: 4 },                 { label: "French", value: 5 },                 { label: "Japanese", value: 6 },                     ]    });

在輸入框輸入c時，此時輸入框對應的值是value的值

 

JQuery UI之Autocomplete(1)