easyui combobox開啟搜索自動(dòng)完成功能的實(shí)例代碼
combo.json
[{
"id":-1,
"text":" ",
"spell":""
},{
"id":1,
"text":"類型1",
"spell":"lx1"
},{
"id":2,
"text":"類型2",
"spell":"lx2"
},{
"id":3,
"text":"類型3",
"spell":"lx3"
},{
"id":4,
"text":"類型4",
"spell":"lx4"
},{
"id":5,
"text":"類型5",
"spell":"lx5"
}]
下面是代碼示例
<form> <input type="text" id="combox1"> </form>
/**
* easyui combobox 開啟搜索功能,自動(dòng)裝載選中的項(xiàng)目處理函數(shù)
*/
function onComboboxHidePanel() {
var el = $(this);
el.combobox('textbox').focus();
// 檢查錄入內(nèi)容是否在數(shù)據(jù)里
var opts = el.combobox("options");
var data = el.combobox("getData");
var value = el.combobox("getValue");
// 有高亮選中的項(xiàng)目, 則不進(jìn)一步處理
var panel = el.combobox("panel");
var items = panel.find(".combobox-item-selected");
if (items.length > 0) {
var values = el.combobox("getValues");
el.combobox("setValues", values);
return;
}
var allowInput = opts.allowInput;
if (allowInput) {
var idx = data.length;
data[idx] = [];
data[idx][opts.textField] = value;
data[idx][opts.valueField] = value;
el.combobox("loadData", data);
} else {
// 不允許錄入任意項(xiàng), 則清空
el.combobox("clear");
}
}
$("#combox1").combobox({
required: true,
editable: true,
missingMessage: '請(qǐng)選擇裝載物料',
valueField: "id",
textField: "text",
method: 'get',
url: 'combo.json',
mode: "local",
onHidePanel: onComboboxHidePanel,
filter: function (q, row) {
//定義當(dāng)'mode'設(shè)置為'local'時(shí)如何過濾本地?cái)?shù)據(jù),函數(shù)有2個(gè)參數(shù):
//q:用戶輸入的文本。
//row:列表行數(shù)據(jù)。
//返回true的時(shí)候允許行顯示。
//return row[$(this).combobox('options').textField].indexOf(q) > -1;
return row["spell"].indexOf(q) >= 0;
}
});
以上這篇easyui combobox開啟搜索自動(dòng)完成功能的實(shí)例代碼就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- jQuery EasyUI API 中文文檔 - ComboBox組合框
- jquery easyui combobox模糊過濾(示例代碼)
- jQuery+easyui中的combobox實(shí)現(xiàn)下拉框特效
- EasyUI中combobox默認(rèn)值注意事項(xiàng)
- Easyui form combobox省市區(qū)三級(jí)聯(lián)動(dòng)
- 如何解決easyui自定義標(biāo)簽 datagrid edit combobox 手動(dòng)輸入保存不上
- jQuery EasyUI編輯DataGrid用combobox實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)
- Easyui的combobox實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)級(jí)聯(lián)效果
- EasyUI Combobox設(shè)置默認(rèn)值 獲取text的方法
- EasyUI學(xué)習(xí)之Combobox級(jí)聯(lián)下拉列表(2)
相關(guān)文章
JavaScript實(shí)現(xiàn)九宮格抽獎(jiǎng)功能的示例代碼
這篇文章主要為大家介紹了如何利用JavaScript實(shí)現(xiàn)九宮格抽獎(jiǎng)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02
深入淺析JSON.parse()、JSON.stringify()和eval()的作用詳解
這篇文章主要介紹了深入淺析JSON.parse()、JSON.stringify()和eval()的作用詳解的相關(guān)資料,需要的朋友可以參考下2016-04-04
使用JavaScript實(shí)現(xiàn)一個(gè)交互式待辦事項(xiàng)列表
JavaScript是一種強(qiáng)大的腳本語言,廣泛應(yīng)用于Web開發(fā)中,本文將通過一個(gè)完整的項(xiàng)目實(shí)例,演示如何使用JavaScript來實(shí)現(xiàn)一個(gè)交互式的待辦事項(xiàng)列表,,需要的朋友可以參考下2023-08-08
javascript將扁平的數(shù)據(jù)轉(zhuǎn)為樹形結(jié)構(gòu)的高效率算法
這篇文章主要介紹了javascript將扁平的數(shù)據(jù)轉(zhuǎn)為樹形結(jié)構(gòu)的高效率算法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
JS對(duì)象與json字符串格式轉(zhuǎn)換實(shí)例
這篇文章主要介紹了JS對(duì)象與json字符串格式轉(zhuǎn)換方法,以實(shí)例的形式詳細(xì)講述了js對(duì)象與json字符串格式轉(zhuǎn)換的技巧,需要的朋友可以參考下2014-10-10
關(guān)于Promise基本方法的簡(jiǎn)單實(shí)現(xiàn)
Promise大家一定都不陌生了,JavaScript異步流程從最初的Callback,到Promise,到Generator,再到目前使用最多的Async/Await,下面這篇文章主要給大家介紹了關(guān)于Promise基本方法的簡(jiǎn)單實(shí)現(xiàn),需要的朋友可以參考下2022-02-02
微信小程序?qū)W習(xí)筆記之跳轉(zhuǎn)頁面、傳遞參數(shù)獲得數(shù)據(jù)操作圖文詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之跳轉(zhuǎn)頁面、傳遞參數(shù)獲得數(shù)據(jù)操作,結(jié)合實(shí)例形式分析了微信小程序基于navigator組件的頁面跳轉(zhuǎn)及數(shù)據(jù)傳遞相關(guān)操作技巧,并結(jié)合圖文形式進(jìn)行詳細(xì)說明,需要的朋友可以參考下2019-03-03

