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 相关文章推荐
一种JavaScript的设计模式
Nov 22 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 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缓存的详解
2013/05/15 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
javascript实现全角半角检测的方法
2015/07/23 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
Python自定义简单图轴简单实例
2018/01/08 Python
python3实现基于用户的协同过滤
2018/05/31 Python
Python中collections模块的基本使用教程
2018/12/07 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
Python实现直播推流效果
2019/11/26 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
python 读取、写入txt文件的示例
2020/09/27 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
Gap英国官网:Gap UK
2018/07/18 全球购物
在校生党员自我评价
2013/09/25 职场文书
实习评语
2013/12/16 职场文书
学生出入校管理制度
2014/01/16 职场文书
研究生求职自荐书
2014/06/23 职场文书
营销总监岗位职责
2014/09/16 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
红色经典观后感
2015/06/18 职场文书
岗位聘任协议书
2015/09/21 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书