JQuery autocomplete 指定變數名稱 & create時ajax時 資料 擷取一次

今天碰上了些實務上的需求
我需要使用$.autocomplete
可是有幾個前提

1. 用ajax只能擷取一次資料
2. 變數名稱不能用label 跟 value

看上去很簡單，然後就.....

好吧，這東西花了我兩天時間，不記錄下來不甘願

首先我們看只能擷取一次資料




這個比較簡單

　　　　needata = "";
       
        $("input").autocomplete({
            create: function (event, ui) {
                $.ajax({
                    url: "<data_link>",
                    dataType: "json",
                    type: "get",
                    success: function (data) {
                        needata = data;
                    }
                });
            },
            source: needata ,
        })

出來之後就可以讓他只有在開始的時候擷取你所要的資料


接下來，困難的來了
如果我要的資料格式不符合autocomplete的預設資料格式怎麼辦？


我們今天傳回來的資料格式是這樣

[
        {
                IDNO: "A1",
                name: "A1"
        },
        {
                IDNO: "A2",
                name: "A2"
        },
        {
                IDNO: "A3",
                name: "A3"
        },
        {
                IDNO: "B2",
                name: "B2"
        },
        {
                IDNO: "B3",
                name: "B3"
        },
        {
                IDNO: "C1",
                name: "C1"
        }
]

那我們要怎麼處理呢?
我在stackoverflow有找到一篇把他轉成autocomplete所需格式的文章
可是他並沒有達到我的需求，因為他的比對不見了

在我研究了許久之後，內部的功能並不能達到我所想要的需求
此時我們只能在source上動手腳了

source: function (request, response) {
    //data :: JSON list defined
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
    response($.grep(needata , function (value) {
        return matcher.test(value.IDNO || value.name); 
    }));

我們就可以在source裡面比對完我們所需要的資料之後，再回傳
如此就能達到我們所要的東西了

needata = [
        {
                IDNO: "A1",
                name: "A1"
        },
        {
                IDNO: "A2",
                name: "A2"
        },
        {
                IDNO: "A3",
                name: "A3"
        },
        {
                IDNO: "B2",
                name: "B2"
        },
        {
                IDNO: "B3",
                name: "B3"
        },
        {
                IDNO: "C1",
                name: "C1"
        }
]
        $("#autocomplete").autocomplete({
            source: function (request, response) {
                //data :: JSON list defined
                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                response($.grep(needata , function (value) {
                    return matcher.test(value.IDNO || value.name || value); 
                }));

            },
            minLength: 1,
            select: function (event, ui) {
                $("#autocomplete").val(ui.item.IDNO);
                return false;
            },
            
        }).autocomplete("instance")._renderItem = function (ul, item) {
            return $("<li>")
                .append("<a>" + item.IDNO + "<br>" + item.name + "</a>")
                .appendTo(ul);>")
                .appendTo(ul);
        }