easyui combobox开启搜索自动完成功能
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开启搜索自动完成功能的更多相关文章
- Eclipse开启代码自动提示功能
Eclipse代码里面的代码提示功能默认是关闭的,只有输入“.”的时候才会提示功能,用vs的用户可能不太习惯 这种,vs是输入任何字母都会提示,下面说一下如何修改eclipse配置,开启代码自动提示功 ...
- **IOS自动完成(搜索自动提示)功能实现
UISearchBar搜索AutoComplete下拉列表搜索提示 http://www.codeios.com/thread-10685-1-1.html 介绍: 在搜索框上加入下拉列表.在 ...
- Android搜索自动提示功能 AutocompleteTextView
1.配置main.xml中自动提示控件: <AutoCompleteTextView android:id="@+id/autotv_searchresult" androi ...
- EasyUI combobox的panelHeight自动高度
在使用EasyUI的时候,有时会用到combobox组件,这里的记录数不是很固定,设置为auto可能会被挡住,设置固定高度时,option很少时,也很丑 所以这里给出我自己自动调整combobox的p ...
- IntelliJ IDEA 2017版 快捷键CTRL + SHIFT + A无效如何调试(详细的开启idea自动make功能 )
1.前景描述 因为我把编译器的快捷键都设置成eclipse模式了,所以要做热部署的时候,需要CTRL + SHIFT + A --> 查找Registry --> 找到并勾选compile ...
- 开启idea自动Build功能
修改Intellij IDEA的配置两步:1.setting -> Compile -> Build project automatically --> 选中 2.CTRL + SH ...
- Eclipse开启与关闭代码自动提示功能
Eclipse代码里面的代码提示功能默认是关闭的,只有输入“.”的时候才会提示功能,用vs的用户可能不太习惯 这种,vs是输入任何字母都会提示,下面说一下如何修改eclipse配置,开启代码自 ...
- eclipse代码自动提示设置、如何配置eclipse的代码自动提示功能(同时解决自动补全变量名的问题)?
对于编程人员来说,要记住大量的类名或类方法的名字,着实不是一件容易的事情.如果要IDE能够自动补全代码,那将为我们编程人员带来很大帮助. eclipse代码里面的代码提示功能默认是关闭的,只有输入“. ...
- StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程)
@ 目录 StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程) 一.下载ELK的安装包上传并解压 1.Elasticsearch下载 2.Logstash下载 3.Kibana ...
随机推荐
- spring配置文件头部配置解析(applicationContext.xml)
分享一个好的学习网站:http://how2j.cn?p=4509 相信大家对spring的配置文件应该都看的很多了,那么大家对配置文件头部的那一坨坨的东西到底是什么了解吗?下面我就把自己的一些见解和 ...
- (转)python随机数用法
进行以下操作前先 import random ,导入random模块 1. random.seed(int) 给随机数对象一个种子值,用于产生随机序列. 对于同一个种子值的输入,之后产生的随机数序列也 ...
- thinkphp 5.0 lnmp环境下 无法访问,报错500(public目录)
两种方法: 1.修改fastcgi的配置文件 /usr/local/nginx/conf/fastcgi.conf fastcgi_param PHP_ADMIN_VALUE "open_b ...
- UWP入门——应用数据和设置
数据有两个基本的分类,应用数据和用户数据,而用户数据则为由用户拥有的数据,如文档,音乐或电子邮件等,下面将大致的介绍一下应用数据的基本操作. 应用数据:应用数据包含APP的状态信息(如运行时状态,用户 ...
- javacript 实现两个数组的差集
<script type="text/javascript"> var array1 = [1,2,3,4,5,6,7,8,9]; var arra ...
- 网站漏洞扫描工具Uniscan
网站漏洞扫描工具Uniscan 网站漏洞的种类有很多种,如何快速扫描寻找漏洞,是渗透测试人员面临的一个棘手问题.Uniscan是Kali Linux预先安装的一个网站漏洞扫描工具.该工具可以针对单 ...
- python opencv3 使用numpy访问图像数据
# coding:utf8 import cv2 """ 将bgr在(0, 0)处改为白色像素 0号为green 1号为blue 2号为red img的每一个位置存一个 ...
- Qt Quick快速入门之qml布局
Qml里面布局主要有两种,锚点布局.Grid布局. 锚点布局使用anchors附件属性将一个元素的边定位到另一个元素的边,从而确定元素的位置和大小.下面是示例 import QtQuick 2.3 i ...
- bzoj1402 Ticket to Ride 斯坦纳树 + 状压dp
给定\(n\)个点,\(m\)条边的带权无向图 选出一些边,使得\(4\)对点之间可达,询问权值最小为多少 \(n \leqslant 30, m \leqslant 1000\) 首先看数据范围,\ ...
- [HNOI2011]数学作业 --- 矩阵优化
[HNOI2011]数学作业 题目描述: 小 C 数学成绩优异,于是老师给小 C 留了一道非常难的数学作业题: 给定正整数 N 和 M ,要求计算\(Concatenate(1..N)\; Mod\; ...