# [JQuery] JQuery UI 語法
###### tags: `jQuery`

### :triangular_flag_on_post: 自動完成 AutoComplete
可以讓使用者輸入需要的資料時，快速過濾並帶入所需訊息

$( "#id" ).autocomplete({
    source: data,     //資料來源(也可以帶function)
    minLength: 2,     //觸發autocomplete的條件:最少輸入幾個字

    //focus的觸發事件，使用者點擊到就將資料帶進#inputid輸入框中
    focus: function (event, ui) {
        $("#idwho").val(ui.item.label);
        return false;
    },
    //select的觸發事件，使用者選擇某項目後自動將所有的值帶進輸入框中
    select: function (event, ui) {
        $("#idlabel").val(ui.item.label);
        $("#idphone").val(ui.item.phone);
        $("#idemail").val(ui.item.email);
        return false;
    }
});

---
[\[JQuery UI\] AutoComplete + ajax使用教學](https://dotblogs.com.tw/felixblog/2019/12/09/131216)
[jQuery API](https://api.jqueryui.com/autocomplete/)
[官方範例](https://jqueryui.com/autocomplete/#multiple)