仿Select下拉框自动提示(easyui combobox插件实现)
来源:互联网 发布:淘宝退款会影响信誉吗? 编辑:程序博客网 时间:2024/06/05 12:41
1.准备工作
由于实现是基于jquery的easyui的combobox实现 所以先下载任意版本 jquery.min.js 插件jquery.easyui.min.js 推荐使用它自带css修改样式 easyui.css demo.css icon.css
2.前端代码
在页面引入需要用到的js,css等 具体页面就自行依葫芦画瓢,先定义一个input
<input id="autoComplete111" class="easyui-combobox" name="dept" style="padding-left:12px;width: 300px;height:46px;font-size: 18px;" placeholder="在此输入您的公司信息"
data-options="valueField:'companyCode',textField:'companyName',url:'payment13123/companyInfo312.do',
panelHeight:95,
width:300,
height:46,
filter: function(q, row){
var opts = $(this).combobox('options');
//return row[opts.textField].indexOf(q) == 0;
return row[opts.textField].indexOf(q)>-1;//将从头位置匹配改为任意匹配
},
onLoadSuccess:function(){
$('#autoComplete111').combobox('setValue','请选择您的公司');//设置默认输入框显示字段(提示语)
} "/>
easyui-combobox:指明他是combobox的input 用于easyui自动生成仿下拉框
valueField:相当于select的value 用于提交到后台
textField:显示给用户的值
url:调用后台的请求地址,用于后台返回json数据
3.后台实现
将前台需要的信息在后台查库或者自定义构造出来,然后在指定格式输出到页面
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");//防止传到页面乱码
JSONArrayexprList1= new JSONArray();
for (int i = 0; i < companyInfo.size(); i++) {
JSONObject jsTemp = new JSONObject();
jsTemp.put("companyName", companyInfo.get(i).getCompanyName());
jsTemp.put("companyCode", companyInfo.get(i).getCompanyCode());
exprList1.add(jsTemp);
}
response.getWriter().write(exprList1.toString());//输出到页面
数据格式为:
[
{"companyName":"腾讯公司","companyCode":"0000025000"},
{"companyName":"阿里云服务","companyCode":"0000025100"},
......................
]
4.效果实现
根据input的data-options的url通过类/方法名映射地址调用后台 后台返回json 前台页面直接就能获取了 页面下拉框效果不合适可以通过修改easy-ui的css修改
- 仿Select下拉框自动提示(easyui combobox插件实现)
- easyui easyui-combobox select下拉框问题
- combobox 动态绑定数据源,利用EasyUI的 combobox插件实现类似百度下拉提示信息
- 使用easyUI的combobox下拉框控件实现输入提示功能(google suggest)
- easyui select combobox 获取下拉选项值
- JQuery EasyUI+Struts2自动匹配输入下拉框(combobox)
- easyui的combobox,自动搜索的下拉框
- easyui的combobox 下拉框筛选自动填充扩展
- EasyUI combobox实现google提示
- 关于easyui combobox下拉框实现多选框的实现
- select下拉框 option 自动提示
- 用easyUI的combobox实现多选下拉框
- easyui-combobox下拉框修改源码 实现模糊搜索
- Easyui笔记1:实现combobox下拉框检索匹配功能
- Easyui笔记3:实现combobox下拉框高度自适应
- easyUI(六) -- combobox实现下拉框及其值的获取
- jQuery EasyUI详解-EasyUI下拉框combobox
- easyui combobox实现搜索下拉补全功能
- windowX64 vs2012环境下静态链接编译32位libcurl 支持openssl
- 在ArcGIS字段计算器中使用Python脚本将Text类型转换成整型
- java 死锁
- tensorflow,卷积神经网络与mnist
- verilog中的综合与不可综合
- 仿Select下拉框自动提示(easyui combobox插件实现)
- js中拼接html文档之onclick函数处理
- 文章标题 spring-cloud浅见
- SSM框架——Spring+SpringMVC+Mybatis的搭建教程 一:概述 SSM框架在项目开发中经常使用到,相比于SSH框架,它在仅几年的开发中运用的更加广泛。 Spring作为一个轻量级
- Eclipse安装git插件
- 设计模式の单例模式
- NLP中的新词发现特征选择
- 解决VM克隆CentOS系统后eth0消失,显示eth1的问题
- Tomcat 部署项目后,访问出现404