使用 JQWidgets 实现下拉框多选+文本搜索+分段搜索

最新推荐文章于 2021-05-26 09:33:55 发布

小小的太阳

最新推荐文章于 2021-05-26 09:33:55 发布

阅读量2.5k

点赞数 5

分类专栏： JQWidgets JQuery

本文链接：https://blog.csdn.net/ndscvipuser/article/details/43967529

版权

JQWidgets 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

JQuery

1 篇文章 0 订阅

订阅专栏

JQWidgets 默认的控件已经足够强大，但总会遇到特殊的需求或变态的想法，这不就出现了如题所说的问题。

一、代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<!-- 
导入 jqwidgets 需要的相关脚本
-->
<script>
var checkDatas = []; //DROPDWON的值集合

//init值为 true 表示第一次使用，也只能用一次
function paintCheckboxes(data, init) {
	var source = {
        datatype: "json", localdata: data, datafields: [{ name: 'value' }, { name: 'text' }]   
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    if(init) {
    	$("#jqxCheckBoxs").jqxListBox({width: '100%', source: dataAdapter, checkboxes: true, height: '100%', displayMember: "text", valueMember: "value"});
    } else {
    	$("#jqxCheckBoxs").jqxListBox({source: dataAdapter});
    }
    var items = $("#jqxCheckBoxs").jqxListBox('getItems');
    if(checkDatas.length > 0) {
    	$.each(items, function (index) {
    		var item = items[index];
    		if(item.value != 'allinone') {
    			var targetMethond = 'uncheckIndex';
    			for(var i = 0; i < checkDatas.length; i++) {
        			var checkData = checkDatas[i];
        			if(checkData.value == item.value) {
        				targetMethond = 'checkIndex';
        				break;
        			}
        		}
    			$("#jqxCheckBoxs").jqxListBox(targetMethond, index);
    		}
        });
    }
}

$(function(){
	$("#jqxDropDownButton").jqxDropDownButton({autoOpen: false, width: '200', height: '25', theme: theme});
	$("#jqxInput").jqxInput({placeHolder: "搜索框", height: 25, width: 200, minLength: 1});
	
	var jsonDatas = [{value:'allinone', text:'全选/反选'},
	    {value:'avc', text:'avc'},{value:'bcd', text:'bcd'},{value:'adc', text:'adc'},
	    {value:'bed', text:'bed'},{value:'vcx', text:'vcx'},{value:'xcb', text:'xcb'}];
	paintCheckboxes(jsonDatas, true);
	
	$('#jqxDropDownButton').on('close', function () { 
		var result = '';
		for(var i = 0; i < checkDatas.length; i++) {
			if(i > 0) result += ',';
			result += checkDatas[i].value;
		}
		$('#jqxDropDownButton').jqxDropDownButton('setContent', result);
	});
	
    $("#jqxCheckBoxs").on('checkChange', function (event) {
        var args = event.args;
        var value = args.value;
        var checked = args.checked;
        if(value == 'allinone') {
        	var items = $("#jqxCheckBoxs").jqxListBox('getItems');
        	var targetMethond = checked?'checkIndex':'uncheckIndex';
    		$.each(items, function (index) {
    			var item = items[index];
    			if(item.value != 'allinone') {
    				$("#jqxCheckBoxs").jqxListBox(targetMethond, index);
    			}
            });
        } else {
        	var tmpDatas = [];
        	for(var i = 0; i < checkDatas.length; i++) {
        		var checkData = checkDatas[i];
        		var isIn = checkData.value == value;
    			if(isIn) {
    				continue;//检查是否已存在。
    			}
        		tmpDatas.push(checkData);
        	}
        	if(checked) {
        		tmpDatas.push({value:value, text:value});
        	} 
        	checkDatas = tmpDatas;
        }
    });
    
    $("#jqxInput").keyup(function(){
    	var _val = $(this).val();
    	var searchDatas = [];
    	if(!_val) {
    		searchDatas = jsonDatas;
    	} else {
    		var li = _val.lastIndexOf(',');
    		if(li > -1) {
    			_val = _val.substr(li + 1);
    		}
    		var regObj = new RegExp('.*?' + _val + '.*?', 'i');
        	searchDatas.push(jsonDatas[0]);
    		for(var j = 1; j < jsonDatas.length; j++) {
    			var jsonData = jsonDatas[j];
    			var _write = regObj.test(jsonData.value);
    			if(_write) {
    				searchDatas.push(jsonData);
    			}
    		}
    	}
		paintCheckboxes(searchDatas);
    });
});
</script>
<style>
.fll {float: left;}
</style>
</head>
<body>
<div id='jqxDropDownButton' style="line-height: 25px;">
	<div style="width: 200px;height: 300px;">
		<input type="text" id="jqxInput" class="fll"/>
		<div id="jqxCheckBoxs" class="fll"></div>
	</div>
</div>
</body>
</html>

二、效果如下：

2.1 输入 x 搜索相关记录，并打勾 vcx；