搜索select中满足条件的项

最新推荐文章于 2023-08-12 09:50:58 发布

最新推荐文章于 2023-08-12 09:50:58 发布 · 268 阅读

js 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种通过JavaScript改进用户在面对众多角色选项时的选择体验的方法。该方法允许用户通过搜索来快速定位并调整角色列表的顺序，从而提高易用性。

从用户的易用性出发，有下面一个bug：当角色过多的时候，用户选择角色很不方便。

修改后的页面效果如图示：

使用的js代码如下：

function searchByName(id,value){
	var spl=value.toLowerCase();
	var selectProjects=document.getElementById(id);
	var options=selectProjects.options;
	var total = -1;
	var meetArray = new Array();
	for(var i=0;i<options.length;i++){
		var op_text=options[i].text.toLowerCase();
		var opArray=op_text.split(spl);
		if(spl.length>0&&opArray.length>1){
			total++;
			meetArray[total]=i;
		}
	}
	var beginIndex = 0;
	for(var i=0;i<=total;i++){
		var index = meetArray[i];
		if(index!=beginIndex){
			var tempText = options[index].text;
			var tempValue = options[index].value;
			options[index].text = options[beginIndex].text;
			options[index].title = options[beginIndex].text;
			options[index].value = options[beginIndex].value;
			options[beginIndex].text=tempText;
			options[beginIndex].title=tempText;
			options[beginIndex].value=tempValue;
		}
		beginIndex++;
	}
	document.getElementById(id+"span").innerHTML=(total+1);
}

其中id是select的id，value是要搜索的值。 span是用来显示有多少个记录。