下拉框中使用json格式数据并且支持模糊搜索
来源:互联网 发布:网络部主要职责 编辑:程序博客网 时间:2024/05/25 12:22
最近开发新项目需要用到下拉框并且支持输入内容后自动搜索包含内容的值,但是由于底层返回值的方法已写死,返回的是一个json格式的数据,不适用于之前的加载方式(之前是返回list或者map,然后直接加载,但是不能进行模糊匹配,代码如下:)
$.ajax({url: url,dataType: 'json',async: false,type: "POST",success: function (obj) {$('#selProv').combobox({data: obj,mode: 'local',valueField: 'regionId',textField: 'regionNm'});}});
想了很久,忽然觉得只要解析json格式的数据再放入下拉框中就解决问题了,源码如下:
/** * 用于下拉框加载json格式的数据,并支持模糊搜 * @param target 下拉框的id * @param url 得到数据的请求路径 * @param value valueField 名称 * @param text textField 名称 */function loadData_combobox(target,url,value,text){ var data; $.ajax({ url: url, dataType: 'json', async: false, type: "POST", success: function (result) { data = result.data; } }); $(target).combobox( { data: data, prompt : '输入关键字后自动搜索', hasDownArrow : true, valueField : value, textField : text, editable : true, mode : 'local', filter : function(q, row) { var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) >= 0; } , onHidePanel: function() { var valueField = $(this).combobox("options").valueField; var val = $(this).combobox("getValue"); var allData = $(this).combobox("getData").data; var result = true; for (var i = 0; i < allData.length; i++) { if (val == allData[i][valueField] && val != '' && val != null) { result = false; break; } } if (result) { $(this).combobox("clear"); $(this).combobox('select', ""); } } } );}
希望能帮助有需要的朋友
阅读全文
0 0
- 下拉框中使用json格式数据并且支持模糊搜索
- mysql使用like模糊搜索json的数据
- 下拉框 支持模糊查询
- 下拉框支持搜索
- springMVC中使用json格式传递数据
- Select下拉框(支持输入模糊查询)
- 下拉列表select中使用ajax的json数据交换格式动态改变div层里面的复选框checkbox值
- 搜索框模糊匹配下拉显示
- BootStrap下拉框,添加模糊搜索
- jquery下拉模糊搜索
- easyui-combobox---ajax获取数据库JSON数据,实现搜索框实时显示模糊搜索结果
- jsp多选并且模糊查询下拉框
- velocity 直接支持json格式数据
- jQuery中使用Ajax获取JSON格式数据
- jQuery中使用Ajax获取JSON格式数据
- 如何在Hive中使用Json格式数据
- jQuery中使用Ajax获取JSON格式数据示例代码
- jQuery中使用Ajax获取JSON格式数据示例代码
- Linq一些方法整理
- 阿里云centos系统安装svn,tomcat,mysql外网连接不上问题解决
- 读书笔记-大型网站系统与Java中间件9
- UVa 725(简单枚举)
- chromium中的GN构建系统
- 下拉框中使用json格式数据并且支持模糊搜索
- vue脚手架项目打包后路由视图不显示问题
- INTP
- mongodb实现简单的增删改查
- padding和margin的区别
- Android中的“再按一次返回键退出程序”实现
- oracle-rac 遇到的错误
- android xxxsdk的扫盲
- 使用WebStorm开发web前端---- 网页中文乱码问题