飛高高程式員

稍微介紹一下什麼是AutoComplete，在chrom上做任何登入時都會問你要不要儲存帳號密碼，下次在你登入時就會自動幫你帶入這就是AutoComplete。

分別記錄有使用AJAX和使用JS陣列的方式，以及介紹常用的參數設定。

這裡有JQuery Demo範例供參考。

範例1 - 使用JS的陣列無ajax的資料

先建立想要提供的資訊

JavaScript:

 var Tags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
    ]; //建立想要提供給使用者自動帶入的資訊(js物件陣列)

HTML:

<input id="tags" type="text" placeholder=""> 

設定JQuery AutoComplete() - 基本範例

JQuery:

 $( "#tags" ).autocomplete({
      source: Tags, //將資訊丟進Source參數裡
      minLength: 2 //使用者最少輸入多少個字才啟動autocomplete
    });

 

範例2 - 使用ajax到資料庫取得資料(多個欄位自動帶入)

後端取得資料回傳給前端

ASP.NET C#:

[HttpGet] 
        public ActionResult SearchAccountContact (string key) 
        {	//參數key為使用者輸入在input的資訊
            var data = db.userAccount 
                .Where(s => s.Name.Contains(key)) 
                .Take(5) //拿取前五筆資料配對的資料
                .Select(r => new 
                        { value = r.UserID,
                         label = r.Name, 
                         phone = r.Telphone,
                         email = r.EMail 
                        }).ToArray();
            return Json(data, JsonRequestBehavior.AllowGet);

建立多個輸入欄位

HTML:

<input id="name" type="text" placeholder=""> //使用者輸名子時啟動自動完成配對
<input id="id" type="text" placeholder="">
<input id="phone" type="text" placeholder="">
<input id="email" type="text" placeholder="">

多欄位自動帶入

JQuery + Ajax :

$("#name").autocomplete({
        minLength: 0,
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("SearchContactAccount")', //
                type: "Get",
                dataType: "json",
                data: {
                    key: request.term    //Name欄位輸入的資訊傳給後端
                },
                //成功取得資料後用Map來整理回傳的資料
                success: function (data) { 
                    response($.map(data, function (item) {
                        console.log(item); //練習時印出來方便觀看資料的長相
                        return {
                            // label和value是基本參數
                            label: item.label,  //列表所顯示的文字
                            value: item.value, 	//列表選項的值
                            phone: item.phone,	//自訂義要多帶的值
                            email: item.email	//自訂義要多帶的值
                        };
                    }));
                }
            });
        },
    	//focus參數事件介紹 : 在下拉選單匹配時如果滑鼠有焦點到會觸發事件
    	//下方是指當使用者只是焦點到某個選項就將名子帶#name輸入框中
        focus: function (event, ui) {
            $("#contactPeople").val(ui.item.label);
            return false;
        },
    	//select參數事件介紹 : 使用者選擇下拉式某項目後觸發事件
    	//當使用者選擇某項目後自動將所有的值帶進輸入框中
        select: function (event, ui) {
            $("#contactPeople").val(ui.item.label);
            $("#contactAccount").val(ui.item.value);
            $("#contactPhone").val(ui.item.phone);
            $("#contactEMail").val(ui.item.email);
            return false;
        }
    });

結尾

如果想了解更多參數可以至JQuery的API Documentation。