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下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
详解Document.Cookie
Dec 25 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 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&amp;&amp;mysql)一
2006/10/09 PHP
PHP 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
php模板函数 正则实现代码
2012/10/15 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
vue计算属性和监听器实例解析
2018/05/10 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
python使用opencv读取图片的实例
2017/08/17 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
python制作抖音代码舞
2019/04/07 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
python中安装django模块的方法
2020/03/12 Python
监理资料员岗位职责
2014/01/03 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
竞聘演讲稿
2014/04/24 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
Python操作CSV格式文件的方法大全
2021/07/15 Python
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python
德生BCL3000抢先使用感受和评价
2022/04/07 无线电