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为对象原型prototype添加属性的两种方式
Aug 01 Javascript
Javascript变量函数浅析
Sep 02 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
vue 中的 render 函数作用详解
Feb 28 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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 include加载文件两种方式效率比较
2010/08/08 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
CI框架常用方法小结
2016/05/17 PHP
PHP7新增函数
2021/03/09 PHP
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Django中使用locals()函数的技巧
2015/07/16 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
python3 shelve模块的详解
2017/07/08 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
python字符串与url编码的转换实例
2018/05/10 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
python批量修改图片大小的方法
2018/07/24 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
房产委托公证书
2014/04/08 职场文书
节电标语大全
2014/06/23 职场文书
金砖之国观后感
2015/06/11 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
信息技术课教学反思
2016/02/23 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL