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开启搜索自动完成功能的更多相关文章

  1. Eclipse开启代码自动提示功能

    Eclipse代码里面的代码提示功能默认是关闭的,只有输入“.”的时候才会提示功能,用vs的用户可能不太习惯 这种,vs是输入任何字母都会提示,下面说一下如何修改eclipse配置,开启代码自动提示功 ...

  2. **IOS自动完成(搜索自动提示)功能实现

    UISearchBar搜索AutoComplete下拉列表搜索提示 http://www.codeios.com/thread-10685-1-1.html 介绍:     在搜索框上加入下拉列表.在 ...

  3. Android搜索自动提示功能 AutocompleteTextView

    1.配置main.xml中自动提示控件: <AutoCompleteTextView android:id="@+id/autotv_searchresult" androi ...

  4. EasyUI combobox的panelHeight自动高度

    在使用EasyUI的时候,有时会用到combobox组件,这里的记录数不是很固定,设置为auto可能会被挡住,设置固定高度时,option很少时,也很丑 所以这里给出我自己自动调整combobox的p ...

  5. IntelliJ IDEA 2017版 快捷键CTRL + SHIFT + A无效如何调试(详细的开启idea自动make功能 )

    1.前景描述 因为我把编译器的快捷键都设置成eclipse模式了,所以要做热部署的时候,需要CTRL + SHIFT + A --> 查找Registry --> 找到并勾选compile ...

  6. 开启idea自动Build功能

    修改Intellij IDEA的配置两步:1.setting -> Compile -> Build project automatically --> 选中 2.CTRL + SH ...

  7. Eclipse开启与关闭代码自动提示功能

        Eclipse代码里面的代码提示功能默认是关闭的,只有输入“.”的时候才会提示功能,用vs的用户可能不太习惯 这种,vs是输入任何字母都会提示,下面说一下如何修改eclipse配置,开启代码自 ...

  8. eclipse代码自动提示设置、如何配置eclipse的代码自动提示功能(同时解决自动补全变量名的问题)?

    对于编程人员来说,要记住大量的类名或类方法的名字,着实不是一件容易的事情.如果要IDE能够自动补全代码,那将为我们编程人员带来很大帮助. eclipse代码里面的代码提示功能默认是关闭的,只有输入“. ...

  9. StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程)

    @ 目录 StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程) 一.下载ELK的安装包上传并解压 1.Elasticsearch下载 2.Logstash下载 3.Kibana ...

随机推荐

  1. (二)Mybatis项目配置

    第一节:environments Mybatis支持多个环境,可以任意配置 <environments default="development"> <envir ...

  2. springMVC源码分析--HttpMessageConverter数据转化(一)

    之前的博客我们已经介绍了很多springMVC相关的模块,接下来我们介绍一下springMVC在获取参数和返回结果值方面的处理.虽然在之前的博客老田已经分别介绍了参数处理器和返回值处理器: (1)sp ...

  3. R vs Python:构建data.frame、读取csv与统计描述

    一.Python 数据框就是典型的关系型数据库的数据存储形式,每一行是一条记录,每一列是一个属性,最终构成表格的形式,这是数据科学家必须熟悉的最典型的数据结构. 1.构建数据框 import pand ...

  4. GreenPlum学习笔记:新手入门命令

    1.命令行登录数据库 psql -h 192.168.111.111 -U username -d dbname 其中,username为数据库用户名,dbname为数据库名,执行后提示输入密码.(可 ...

  5. PHP性能调优---php-fpm - 启动参数及重要配置详解

    约定几个目录/usr/local/php/sbin/php-fpm/usr/local/php/etc/php-fpm.conf/usr/local/php/etc/php.ini 一,php-fpm ...

  6. 查看本地安装的sql server是什么版本

    方法一:查询语句 SELECT @@VERSION返回当前安装的日期.版本和处理器类型.例如:结果为: Microsoft SQL Server 2008 (RTM) - 10.0.1600.22 ( ...

  7. SQL Server中的快捷键

    新建查询:Ctrl + N 反撤销:Ctrl + Y 撤销:Ctrl + Z 查找:Ctrl + F 启动调试:Alt + F5 注释:Ctrl + K + C 取消注释:Ctrl + K + U 执 ...

  8. springboot之使用@ConfigurationProperties注解

    springboot之使用@ConfigurationProperties注解 代码已经上传至github https://github.com/gittorlight/springboot-exam ...

  9. Ionic Js十五:对话框

    $ionicPopup ionic 对话框服务允许程序创建.显示弹出窗口. $ionicPopup 提供了3个方法:alert(), prompt(),以及 confirm() . 实例 HTML 代 ...

  10. OpenGL笔记<第一章> 构建 GLSL class

    恭喜,我们终于很扎实地完成了第一章——glsl 入门 不幸的是,it's not the basic of GLSL shader ,我们下一节开篇,basic of GLSL shader 在下一章 ...