easyui combobox开启搜索自动完成功能的实例代码


Posted in Javascript onNovember 08, 2016

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开启搜索自动完成功能的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Array的push与unshift方法性能比较分析
Mar 05 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
VUE长按事件需求详解
Oct 18 Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 Javascript
基于Vuejs框架实现翻页组件
Jun 29 #Javascript
vue2.0+webpack环境的构造过程
Nov 08 #Javascript
详解React-Todos入门例子
Nov 08 #Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 #Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 #Javascript
BootStrap table使用方法分析
Nov 08 #Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 #Javascript
You might like
php $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
php牛逼的面试题分享
2013/01/18 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
跟老齐学Python之永远强大的函数
2014/09/14 Python
python字典序问题实例
2014/09/26 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python selenium 三种等待方式解读
2016/09/15 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
用python与文件进行交互的方法
2018/03/01 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
关于Python-faker的函数效果一览
2019/11/28 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
基于python实现坦克大战游戏
2020/10/27 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
通信工程毕业生求职信
2013/11/16 职场文书
2014年创卫实施方案
2014/02/18 职场文书
《满井游记》教学反思
2014/02/26 职场文书
学校招生宣传广告词
2014/03/19 职场文书
客户答谢会活动方案
2014/08/31 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书