easyui combobox開啟搜索自動完成功能的實例代碼
更新時間:2016年11月08日 16:26:12 投稿:jingxian
下面小編就為大家?guī)硪黄猠asyui combobox開啟搜索自動完成功能的實例代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
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 開啟搜索功能,自動裝載選中的項目處理函數 */ function onComboboxHidePanel() { var el = $(this); el.combobox('textbox').focus(); // 檢查錄入內容是否在數據里 var opts = el.combobox("options"); var data = el.combobox("getData"); var value = el.combobox("getValue"); // 有高亮選中的項目, 則不進一步處理 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 { // 不允許錄入任意項, 則清空 el.combobox("clear"); } } $("#combox1").combobox({ required: true, editable: true, missingMessage: '請選擇裝載物料', valueField: "id", textField: "text", method: 'get', url: 'combo.json', mode: "local", onHidePanel: onComboboxHidePanel, filter: function (q, row) { //定義當'mode'設置為'local'時如何過濾本地數據,函數有2個參數: //q:用戶輸入的文本。 //row:列表行數據。 //返回true的時候允許行顯示。 //return row[$(this).combobox('options').textField].indexOf(q) > -1; return row["spell"].indexOf(q) >= 0; } });
以上這篇easyui combobox開啟搜索自動完成功能的實例代碼就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery EasyUI API 中文文檔 - ComboBox組合框
- jquery easyui combobox模糊過濾(示例代碼)
- jQuery+easyui中的combobox實現(xiàn)下拉框特效
- EasyUI中combobox默認值注意事項
- Easyui form combobox省市區(qū)三級聯(lián)動
- 如何解決easyui自定義標簽 datagrid edit combobox 手動輸入保存不上
- jQuery EasyUI編輯DataGrid用combobox實現(xiàn)多級聯(lián)動
- Easyui的combobox實現(xiàn)動態(tài)數據級聯(lián)效果
- EasyUI Combobox設置默認值 獲取text的方法
- EasyUI學習之Combobox級聯(lián)下拉列表(2)
相關文章
JavaScript實現(xiàn)選項卡功能(面向過程與面向對象)
本文主要介紹了JavaScript實現(xiàn)選項卡功能(面向過程與面向對象),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02JavaScript中使用sencha gridpanel 編輯單元格、改變單元格顏色
ExtJS中的表格功能非常強大,包括了排序、緩存、拖動、隱藏某一列、自動顯示行號、列匯總、單元格編輯等實用功能,通過本篇文章給大家介紹JavaScript中使用sencha gridpanel 編輯單元、改變單元格顏色,感興趣的朋友一起學習2015-11-11