jquery 自動補全

學習要點

• 呼叫autocomplete()方法
• 修改autocomplete()樣式
• autocomplete()方法的屬性
• autocomplete()方法的事件

自動補全多用於輸入郵箱，搜尋關鍵字等等。然後提出完整的字串供使用者選擇.

呼叫autocomplete()方法

$("#email").autocomplete({
  source:['xx@163.com','bb@163.com','cc@163.com']
})
//表示只要使用者輸入xx後面就會出現@163.com，幫使用者補全了。

autocomplete()方法的屬性

• source 指定資料來源可以是本地的也可以是遠端的
• delay 預設是300毫秒，延遲設定
• autoFocus 設定為true的時候，第一個專案會被選定
• focus 當自動補全獲取焦點，會呼叫focus方法。該方法有2個引數一個event,一個ui此事件中ui有兩個子屬性物件一個是label補全列表顯示的文字，第二個value將要輸入框的值。一般label與value值相同
• select 同focus
• change 也是兩個引數，但是ui沒有子屬性

$("#email").autocomplete({
   source:['xx@163.com','bbb@163.com','ccc@163.com'],
   delay:50,
   autoFocus:true,
   focus:function(e,ui){ui.item.value='123'},
   select:function(e,ui){ui.item.value='123'},
   change:function(e,ui){window.alert('')},
   search:function(e,ui){window.alert("")}

})