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 相关文章推荐
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
JavaScript数组常用方法
Mar 02 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
ionic实现底部分享功能
May 11 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 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
Zend Guard一些常见问题解答
2008/09/11 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
2013/04/23 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
安全资金保障制度
2014/01/23 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
Elasticsearch 索引操作和增删改查
2022/04/19 Python
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript