Easy UI combobox实现类似 Select2的效果,下拉带搜索框
一直在开发一个新系统,其中用Easy UI作为前端框架,少不了用 combobox做为一个 下拉控件,它支持 可编辑 模糊本地数据过滤,也可支持 不可编辑 下拉 选择的功能;
$('#ID' ).combobox({
data: CommonSelect.Return_Company('All'),
valueField: 'ID',
textField: 'Company_Name',
prompt: '选择对应公司',
editable: false/true
});
效果就是如下:
但 实际需求中,对于下拉 又不想让他们编辑,但又方便他们查找 下拉数据,这时候 下拉 带搜索的 功能孕育出来了!
Easy UI有组合控件一说,所以得用到这个,实现如下:
$('#ID' ).combobox({
data: CommonSelect.Return_Company('All'),
valueField: 'ID',
textField: 'Company_Name',
prompt: '选择对应公司',
editable: false,
onBeforeLoad: function () {
var panel = $('#ID' ).combo('panel')
$("<input type=\"text\" placeholder=\" 输入查询内容\" style=\"width:100%;\" onkeyup=\"CommonSelect.ChangeData_Company(this)\" />").prependTo($(panel).parent("div"));
}
});
CommonSelect.ChangeData_Company = function (Obj) {
var val = Obj.value;
var _CurrData = [];
var _company = CommonSelect.Return_Company();
_company.map(function (elem, index) {
if (elem.Company_Name.indexOf(val) != -1) {
_CurrData.push(elem);
}
});
if (_CurrData.length == 0) {
_CurrData.push({ ID: 0, Company_Name: '-请选择-' });
}
$('#ID').combobox('loadData', _CurrData);
}
效果图:
Easy UI combobox实现类似 Select2的效果,下拉带搜索框的更多相关文章
- div模仿select效果二:带搜索框
项目需要,要做一个首字母快速定位的select,代码如下: HTML <div class="select_country" unselectable="on&qu ...
- Android UI(五)云通讯录项目之联系人列表,带侧滑选择,带搜索框
作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节.交流QQ群:[编程之美 365234583]h ...
- 品优购商城项目(二)AngularJS、自动代码生成器、select2下拉多选框
品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框 完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...
- easyui combobox点击输入框弹出下拉框
由于easyui combobox需要点击下拉箭头才能下拉,不能像select标签那样点击输入框就下拉,所以觉得不太方便,查看了一下,combobox弹出框是一个div,原本想在他的输入框的点击事件中 ...
- 【Select2】带搜索框的下拉框美化插件
1 引入js css 文件 <script src="js/jquery-1.11.1.min.js"></script> <script src= ...
- Easy UI下拉列表默认选中(多行)与为文本框赋值
1.为单行文本框赋值 var data2 = $('#LoadArea').combobox("getData"); if (data2) { $('#id).combobox(' ...
- EasyUI combobox下拉多选框的实现
combobox实现下拉列表多选, 效果如下
- ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...
- select2 3.5.3 二级下拉及搜索
select2 [3.5.3]版本 select2 插件地址 http://select2.github.io/select2/ 支持搜索: JS代码,如果Group不需要勾选,goup不加id就可以 ...
随机推荐
- 运行python程序不显示cmd方法
运行python程序不显示cmd方法 Pythonw xxx.py 将*.py改成*.pyw,然后执行*.pyw Python.exe和pythonw.exe不同: 执行时没有控制台窗口 所有向原有的 ...
- Windows10系统python环境下安装Dlib库(转载,蔡军帅亲测可用)
Dlib是一个很优秀的机器学习库,最近做人脸识别要用到这个库,简要记录一下配置过程,准备工作: 1.python环境 2.安装好pip(这里有个简单的安装教程) 3.Dlib包,贴一个我安装的版本,链 ...
- three.js效果之热力图和轨迹线
1.热力图 开始的时候,是用一个网上找的canvas画渐变热点的demo,原理就是给定顶点坐标,然后画圆,颜色使用渐变色,根据权重决定渐变的层数(红色->橙色->绿色) . 但是终究觉得这 ...
- 【使用新版mysql驱动的改变】---记忆犹新
关于 版本的问题: 之前安装数据库的时候 安装的mysql 8.0 脚本文件来自5.7 的数据库 maven版本3.5.3 jdk1.8 tomcat 9 跑maven项目的时候 遇到各种问题 ...
- node 笔记整理
node 合并多个请求的数据 function getList1(num) { var url= "netease/search?keyword=独孤天下&type=song& ...
- Ubuntu16.04安装K8s步骤和踩坑记录【不错】
文章目录环境信息安装步骤系统配置修改安装docker安装kubectl,kubelet,kubeadm配置Master配置Node部署结果检查K8S部署mysql学习新建mysql-rc.yaml创建 ...
- 使用sequelize-auto生成sequelize的Models
一.全局安装sequelize-auto npm install -g sequelize-auto 二.全局安装对应数据库的驱动,此处使用的是mysql npm install -g mysql 三 ...
- 修改Jupyter Notebook默认目录
Jupyter Notebook每次打开都需要先进到相应的文件夹再打开 很不方便 首先进入到Jupyter的安装目录,我的是 D:\Anaconda3\Scripts 然后,输入命令: jupyter ...
- [转帖]云服务器使用CentOS、Debian、Ubuntu的哪个版本
云服务器使用CentOS.Debian.Ubuntu的哪个版本 2018-09-09 12:32:45作者:ywnz稿源:云网牛站 https://ywnz.com/linuxyffq/2986.ht ...
- firewall-cmd 的简单使用 进行端口转发的使用
今天本来想用 ssh 做端口转发 但是命令死活想不起来了.. 没办法改用firewall-cmd 来进行处理 方法: 1. 首先不能关防火墙 systemctl enable firewalld sy ...