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

时间:2022-02-27 22:09:52

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



希望能帮助有需要的朋友