ASP.NET MVC 4 WebApi 與 Extjs 的結合 -- AutoComplete

自動完成 ( AutoComplete ) 在許多網頁上都看得到，假設說一個 Combo 選項資料一多，使用者在找資料時就會花上一些時間，可能選項內容會做排序讓使用者找起來比較方便，但如果資料是中文字串且資料又多的話，那就會加大使用者搜尋難度。

使用自動完成 ( AutoComplete ) 好處就在鍵入關鍵字就能找到完整字詞，且順便可以偵測自己打的字串是否有誤，省時又省力。

接下來我就延續 ASP.NET MVC 4 WebApi 與 Extjs 的結合 -- Combo 連動 來做說明。

數據模式

數據模式有兩個值，local 和 remote，local 是指在頁面載入時只讀一次，remote 是指每一次需要數據時，就會與資料庫要一次資料 ( load store)。
在此使用 local

// 數據模式：本地
queryMode: 'local'

是否允許輸入

ㄧ般來說，文字欄位是不需要這個屬性，xtype: 'combobox' 才需要設置

// 是否允許輸入
editable: true

必須要符合選項

此設置是選項必須是在資料來源內，通常與 editable: true 一起用，若輸入不符合來源資料之一，則取消選取

forceSelection: true

包含搜尋

// 包含字串搜尋
anyMatch: true

未選擇前顯示字串

// 未選擇前顯示字串
emptyText: '請選擇產品類別'

隱藏欄位文字、隱藏下拉按鈕

這樣會看起來像文字欄位

hideLabel: true
hideTrigger: true

列表顯示樣式

listConfig: {
    loadingText: '搜尋中...',
    emptyText: '找不到任何分類',
    // 顯示樣板
    getInnerTpl: function () {
        return '{CategoryID}、{CategoryName}';
    }
}

最小輸入字元出現提示

// 最小輸入字元，此選項控制輸入第 n 個字元則出現提示
minChars: 1