您的位置:首页 > Web前端 > JavaScript

下拉框中使用json格式数据并且支持模糊搜索

2017-06-23 17:26 441 查看
最近开发新项目需要用到下拉框并且支持输入内容后自动搜索包含内容的值,但是由于底层返回值的方法已写死,返回的是一个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', "");
}
}
}
);
}


希望能帮助有需要的朋友
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息