效果如圖:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISN4AzNzcDMyITMwgDM2EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
每次輸入資料去比對資料庫資料,加載到下拉框中。
邊輸入邊加載,通常我們想到的就是文本框的onChange事件,不過這裡用onchange,可以實作,但bug就太多了。
每次點選文本框,就會觸發datagrid的行單擊事件,且每次輸入儲存後也會觸發該事件,處理的東西很多。
改進,我用了loader屬性。
valueField: 'id',
textField: 'text',
url: "xx",
mode: "remote", //定義文本改變時讀取資料,remote為遠端,使用者輸入的資料以參數名為q的資料請求到伺服器,
queryParams: {
// test: "123"<span style="font-family: Arial, Helvetica, sans-serif;">//附帶查詢參數(開啟遠端預設傳遞q,就是輸入的内容)</span>
},
loader: ComboDataLoader,
//過濾從遠端伺服器加載的資料
loader加載:
//Combobox過濾從遠端伺服器加載資料 param:傳遞的參數,
function ComboDataLoader(param, success, error) {
//擷取combobox輸入的值
var q = param.q;
if (q == undefined || q == "" || q == null)
return false;
$.ajax({
url: "/xxxx",
type: "post",
data: { searchTxt: q },
dataType: "json",
success: function (data) {
//執行loader的success回調函數(裝載資料)
success(data);
},
//異常處理
error: function (xml, text, msg) {
error.apply(this, arguments);
}
});
}
這樣處理就很友善,根據輸入的文本來比對下拉框的資料。