easyui combobox開(kāi)啟搜索自動(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 開(kāi)啟搜索功能,自動(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í)如何過(guò)濾本地?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開(kāi)啟搜索自動(dòng)完成功能的實(shí)例代碼就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- jQuery EasyUI API 中文文檔 - ComboBox組合框
- jquery easyui combobox模糊過(guò)濾(示例代碼)
- 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)選項(xiàng)卡功能(面向過(guò)程與面向?qū)ο?
本文主要介紹了JavaScript實(shí)現(xiàn)選項(xiàng)卡功能(面向過(guò)程與面向?qū)ο?,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02layui select 禁止點(diǎn)擊的實(shí)現(xiàn)方法
今天小編就為大家分享一篇layui select 禁止點(diǎn)擊的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09純js三維數(shù)組實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了純js三維數(shù)組實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02js實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡效果
本文主要介紹了js實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡效果的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02JavaScript中使用sencha gridpanel 編輯單元格、改變單元格顏色
ExtJS中的表格功能非常強(qiáng)大,包括了排序、緩存、拖動(dòng)、隱藏某一列、自動(dòng)顯示行號(hào)、列匯總、單元格編輯等實(shí)用功能,通過(guò)本篇文章給大家介紹JavaScript中使用sencha gridpanel 編輯單元、改變單元格顏色,感興趣的朋友一起學(xué)習(xí)2015-11-11