jQuery Autocomplete 備忘錄

之前使用過此 widget，如今再次需要，發現很多東西已經記不起來了，當然之前用的版本也不一樣。

使用之前當然是先認真閱讀官方的說明文檔和示例，這點很重要，而不是東一塊西一點的去網上瞎找資料。Options，Methods，Events 區分的很詳細，參考 jQuery Autocomplete Widget API DOC 。

我需要的場景是，一個文本框，根據動態輸入，ajax get data source，select 結果後做些 dom 操作。這是一個簡單場景，當然我需要的其實很複雜，後面講。先說我遇到的問題。

先看使用代碼：

function registerAuto() {
    var autoId = "cust-code";
    $("#" + autoId)
        .autocomplete({
            source: function(request, response) {
                var term = $.trim(request.term);
                //term.replace("$", "") only replace the first match one
                if (term.length === 0 || $.trim(term.split("$").join("")).length === 0) {
                    return;
                }
                $.ajax({
                    url: "/order/aeo/customer",
                    method: "post",
                    dataType: "json",
                    data: { keywords: term },
                    success: function(data) {
                        response(data);
                    }
                });
            },
            delay: 800,
            autoFocus: true,
            minLength: 2,
            position: { my: "left bottom", at: "left top" },
            select: function(event, ui) {
                //console.log(ui);
                showCustomer(ui.item.value);
            },
            change: function(event, ui) {
                //console.log(ui);
                if (!ui.item) {
                    $("#" + autoId).val("");
                    hideCustomer();
                }
            }
        });
}

問題一：

一個修改需求，需要修改已選中的文本框的值。

有一個初始值，當頁面載入後，賦值文本框，自動執行搜索，然後選取記錄（single item 只有一條結果記錄）。為什麼這樣做，是因為需要觸發 select 事件。

該怎麼辦呢？

解決方案：

1、最簡單的辦法就是：賦值文本框，然後手動調用 select 裡面需要執行的方法，不需要執行 autocomplete。

 $(function() {
     registerAuto();
     $("#cust-code").val("@Model.CustomerCode");
     showCustomer("@Model.CustomerCode");
 });

如上代碼就行了，但是本人很倔，就是要 autocomplete 方式，手動的去調用它的方法去觸發事件。

2、開始以為，只要 focus 文本框，然後賦值文本就會觸發自動搜索事件，結果是根本不行的。

辛苦搜索了很多資料，以 jquery autocomplete manually search 關鍵信息才找到解決方法。

 $(function() {
     registerAuto();
     $("#cust-code").val("@Model.CustomerCode");
     $("#cust-code").autocomplete("search");
 });

代碼觸發 search 事件，但問題又來，怎麼實現自動 select 結果呢？使用的是投機的方式，根據生成的 items ui 去 click 標簽。

 $(function() {
     registerAuto();
     $("#cust-code").val("@Model.CustomerCode");
     $("#cust-code").autocomplete("search");
     setTimeout(function() {
         $(".ui-menu-item").click();
      }, 100);
  });

其中的 setTimeout，是為了有足夠的時間等待 ajax 返回結果。

好了上面問題是解決了，但一個終極問題，應該也是很多人遇到的問題，卻需要亟待解決。

問題二：

ajax 返回結果太多，如何動態分頁的去獲取結果，而不是一次性載入呢？

自己想到了一個方案：搜索結果有滾動條，當滾動條到底部時，自動載入下一頁結果，直到全部載入完。其實，用戶可能只載入幾頁，找不到結果就換關鍵詞重新搜索了。

但遇到的難題是：怎麼把動態載入的結果，append 到 autocomplete 的 data source 裡面，因為其他事件（如 select ）需要。

又想到的解決是：修改 autocomplete 源碼，增加擴展方法；或者綁定事件到 items ui 上，如 scroll bar 載入方法，click select 方法等。

解決方案：

總之目前沒有實現，不知道諸君有何建議？