下拉框输入检索

最新推荐文章于 2024-09-24 10:25:23 发布

czycode

最新推荐文章于 2024-09-24 10:25:23 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/czycode/article/details/39553747

版权

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

select可以直观的展示多个选项供用户选择，可当选项过多时，在成百上千个记录中找到自己需要的内容就很考验人的视力了。

如果能根据输入的内容检索出需要的项，无疑能大大减少查找范围。

select本身不提供输入功能，只能通过样式模拟下拉框，废话不多说：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉框输入检索</title>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>

<script type="text/javascript">
	var selectForum; //下拉框
	var selectOptions; //下拉框初始选项
	
	$(function(){
		selectForum = $("#selectId");	
		selectOptions = selectForum.children("a");
		
		bind();
		
		//文本框键盘弹起事件
		$("input").keyup(function(){
		   var value = this.value; //文本框的值
		   selectChange(value); //根据输入的值该变下拉框中的选项
		});
	});
	
	//绑定事件和样式
	function bind(){
		//下拉选项该悬浮手型
		selectForum.children("a").css("cursor","pointer");
		
		//下列选项添加点击事件
		selectForum.children("a").each(function(){ 
			var value = this.text;
			var len = value.length;
			var max = 17;
			var change = value;
			
			if(len > max){
				change = value.substring(0,max);
			}
			
			change = "<span title='"+ value +"'>" + change + "</span>";
			
			$(this).html(change);
			
			$(this).click(function(){
				$("#corpId").val(value); //该输入框的值为选中下列选项
				$("#corpCode").val(this.id);
				
				selectForum.css("display","none"); // 选中之后下拉框消失
			});
		});
	}

	//下拉列表打开/关闭
	function openSelect(){
		var status = selectForum.css("display");
		
		//点击输入框后：下拉框是打开就关闭；是关闭就打开
		if("block" == status){
			selectForum.css("display","none");
		}else if("none" == status){
			selectForum.css("display","block");
		}
	}
	
	/**
	 * value 文本框中输入的值
	 * 根据文本框输入的值，改变下拉框中的选项
	*/
	function selectChange(value){
		var content = "";
	
		//遍历下拉框选项
		selectOptions.each(function(){ 
			var id = this.id;
			var text = this.text;
			
			//检索符合条件的项
			if(text.indexOf(value) != -1){
				content += "<a id='"+ id +"'>" + text + "</a><br />";
			}
		});
		
	   selectForum.html(content);//改变下拉框中的选项
	   bind();//重新绑定事件
	}
	
</script>
</head>

<body>
	<div>
		<input id="corpCode" name="corpCode"/><br />
        <input id="corpId" οnclick="openSelect()" οnfοcus="this.select();" style="width:300px"/>
        <div id="selectId" style="display:none; border:1px solid gray;width:300px;">
            <a id="1">广州市誉竣餐饮有限公司美满美食餐厅</a><br />
            <a id="2">广州阿一鲍鱼酒家有限公司</a><br />
            <a id="3">广州市天河区石牌都城一族天河东快餐店</a><br />
            <a id="4">广州中桥天河体育会所有限公司</a><br />
            <a id="5">桂林仔佳味米粉—第六分店(曾用名：华苑快餐店）</a>
        </div>
    </div>
</div>
</body>
</html>

由于本人实在木有审美观，样式略丑，大家看习惯就好。关于打开下拉框的时机代码中做的不是太爽，只实现了大致效果。这段代码需要把选项都加载之后，在本地用js筛选的，改天再贴一个类似百度那种Ajax方式。