JQuery UI——自動完成元件
阿新 • • 發佈：2019-01-27
當用戶在文字框輸入資料時，可以使用自動完成元件向其提供建議資料
一.讓輸入框支援自動完成
<html>
<head>
<title></title>
<script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
<link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />
<script 二.配置自動完成元件
自動完成元件選項：
- appenTo：指定彈出層元素的DOM插入位置，預設是body元素
- autoFocus：彈出層第一項會自動取得焦點，可直接回車取得
- delay：指定按下一個鍵之後多長時間更新資料，預設300ms
- disable：禁用文字框的自動完成
- minLength：指定輸入最少多少個字元後才開始自動完成選單
- position：設定彈出層相對input元素位置
- source：指定彈出層的資料來源
/**使用delay、minLength、遠端資料來源*/
<script type="text/javascript">
$(function(){
$("#acInput").autocomplete({
source:"http://node.jacquisflowershop.com/auto",
minLength:3,
delay:1000
});
});
</script>/**設定彈出層位置*/
<html>
<head>
<title></title>
<script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
<link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />
<script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" ></script>
</head>
<style type="text/css"></style>
<script type="text/javascript">
$(function(){
var flowers = [{label:"Aster(Pruple)",value:"Aster"},
{label:"Daffodil(White)",value:"Daffodil"},
{label:"Rose(Pink)",value:"Rose"}];
$("#acInput").autocomplete({
source:flowers,
position:{
my:"left top",
at:"right bottom+20",
of:"#target",
collision:"fit"
}
});
});
</script>
<body>
<div class="ui-widget">
<label for="acInput">Flower Name:</label><input id="acInput" />
</div>
<span id="target">Target</span>
</body>
</html>
/**position屬性值指定了彈出層的一系列規則*/position函式：
- my：指定彈出層的什麼位置相對於目標元素
- at：指定my元素的彈出層位置相對於目標元素的什麼位置
- of：指定彈出層的目標元素
- collision：當彈出層遮住視窗時，調整彈出層位置方式
三.自動完成元件方法
- close：關閉自動完成彈出選單
- destory：刪除自動完成元件
- disable：禁用
- enable：啟動
- option：設定選項
- “search”,value：用某個值主動觸發自動完成元件，預設為使用者輸入引數
$("#acInput").autocomplete("search",this.id);
//用按鈕的id號作為啟動自動完成元件的觸發文字四.自動完成元件事件
- change：當文字框值發生變化且失去焦點時
- close：當彈出選單關閉時
- create：自動完成元件建立完成時
- focus：得到焦點時
- open：彈出選單顯示時
- response：所搜完成但尚未給使用者看時
- search：自動完成資料生成完畢之前或請求完成之前
- select：當一項被選中時
1.獲取選中的詳細資訊
ui物件的item屬性儲存了獲得焦點的項，以此獲得資訊：
function displayItem(event, ui){
$("itemLabel").text(ui.item.label)
}
//呼叫displayItem時，只用寫函式名即可，不用傳參2.修改搜尋結果response
在資料顯示給使用者前，response函式提供了最後的修改機會
$("#acInput").autocomplete({
source:flowers,
response:filterResults
});
function filterResults(event,ui){
for(var i = 0 ; i < ui.content.length; i++){
if(ui.content[i].label == "Poney")
ui,content.splice(i,1);
//splices刪除Poney選項，使用者看不到此選項
}
}