一直在开发一个新系统,其中用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的效果,下拉带搜索框的更多相关文章

  1. div模仿select效果二:带搜索框

    项目需要,要做一个首字母快速定位的select,代码如下: HTML <div class="select_country" unselectable="on&qu ...

  2. Android UI(五)云通讯录项目之联系人列表,带侧滑选择,带搜索框

    作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节.交流QQ群:[编程之美 365234583]h ...

  3. 品优购商城项目(二)AngularJS、自动代码生成器、select2下拉多选框

    品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框 完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...

  4. easyui combobox点击输入框弹出下拉框

    由于easyui combobox需要点击下拉箭头才能下拉,不能像select标签那样点击输入框就下拉,所以觉得不太方便,查看了一下,combobox弹出框是一个div,原本想在他的输入框的点击事件中 ...

  5. 【Select2】带搜索框的下拉框美化插件

    1  引入js css 文件 <script src="js/jquery-1.11.1.min.js"></script> <script src= ...

  6. Easy UI下拉列表默认选中(多行)与为文本框赋值

    1.为单行文本框赋值 var data2 = $('#LoadArea').combobox("getData"); if (data2) { $('#id).combobox(' ...

  7. EasyUI combobox下拉多选框的实现

    combobox实现下拉列表多选, 效果如下

  8. ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...

  9. select2 3.5.3 二级下拉及搜索

    select2 [3.5.3]版本 select2 插件地址 http://select2.github.io/select2/ 支持搜索: JS代码,如果Group不需要勾选,goup不加id就可以 ...

随机推荐

  1. spring cloud之docker微服务客户端注册eureka问题

    正常我们起一个微服务注册到eureka他的实例id是默认这样的主机名称:服务名称:服务端口号, 如果配置eureka.instance.prefer-ip-address=true则实例id为主机Ip ...

  2. Mybatis中表名当做变量

    做业务时,有时候会遇到不同SQL语句之中,只有使用的表名不用而已,其他参数和取得值都是一样的情况.这种时候必然想到把表名当做一个变量传到共通的SQL语句中. 当然正常的传入参数的方式#{param}肯 ...

  3. JPA,Hibernate,Spring Data JPA之间的关系

    什么么是JPA? 全称Java Persistence API(JAVA对象持久化API),可以通过注解或者XML描述[对象-关系表]之间的映射关系,并将实体对象持久化到数据库中. 为我们提供了: 1 ...

  4. vlc命令行: 转码 流化 推流

    vlc命令行: 转码 流化 推流 写在命令行之前的话: VLC不仅仅可以通过界面进行播放,转码,流化,也可以通过命令行进行播放,转码和流化.还可以利用里面的SDK进行二次开发. vlc命令行使用方法: ...

  5. JAVA 面向对象编程 --自我总结

    子系统 系统结构是指由系统多个子系统组成,以及子系统由多个更小的子系统组成的结构.那么子系统又具备哪些特点呢? 特点: 1.结构的稳定性 :软件在设计阶段,在把一个系统划分成更小的子系统时,设计合理, ...

  6. springcloud 心得记录

    1.nacos,模块启动无加载顺序 2.nacos,线上配置中心修改文件后,需重启模块

  7. Linux多线程编程 - sleep 和 pthread_cond_timedwait

    #include <stdio.h> #include <stdlib.h> int flag = 1; void * thr_fn(void * arg) {   while ...

  8. 【转帖】Linux和GNU系统

    Linux和GNU系统 Richard Stallman 著 http://www.gnu.org/gnu/linux-and-gnu.zh-cn.html 更多信息,请同时参看GNU/Linux常见 ...

  9. (五)Java秒杀项目之页面优化

    一.页面缓存+URL缓存+对象缓存 1.通过加缓存来减少对数据库的访问 2.步骤: 取缓存 手动渲染模版 结果输出 3.页面缓存和URL缓存的过期时间比较短,比较适合变化不大的场景,比如商品列表页.而 ...

  10. python------模块基础【第二部分-time】------

    一.time UTC/GMT:世界时间 本地时间:本地时区时间 python中时间日期格式化符号: %y 两位数的年份表示(00-99) %Y 四位数的年份表示(000-9999) %m 月份(01- ...