可输入模糊查询功能的下拉菜单

andy1217 2008-10-29 04:35:37
比如说在输入框输入姓名“张”，下拉菜单自动检索出与张匹配的姓名，这样的功能怎么实现呀？
那位大哥能否给个成熟的例子，谢谢了！！！！！！
...全文
1260 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
fjmandmfq 2010-04-16
  • 打赏
  • 举报
 回复
afsda
andy1217 2008-10-31
  • 打赏
  • 举报
 回复
哎！用winsongoog的加进去后和这个页面 里的选项卡不兼容呀
winsongood 2008-10-30
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 sy_binbin 的回复:]
问下，假如数据现在有1000W条，也都要先读出来吗？？

[/Quote]

呵，老兄，现在说的可是下拉框哦，我想不到有什么程序的设计会有1000W条的数据要放到下拉框里去显示的，如果真要这么设计，那这个程序也太。。。。

我这个的做法，只是为了在比较多的下拉列表里，可让用户自行输入相关的数据进行显示出来，方便使用，并不是要查询大量的数据用的
xiaoxiaojiewang0518 2008-10-30
  • 打赏
  • 举报
 回复
我不要分,我来收集一些有可能用的源码（如8楼的代码）,顺便帮顶。
sy_binbin 2008-10-30
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 winsongood 的回复:]
不需要用AJAX也可以实现，前2天我刚做过此效果，呵
不过我是先将所有数据读取出来，然后再根据输入去筛选的

完整代码如下，直接保存为HTML运行即可出效果了：


HTML code
<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>
<TITLE>可输入的下拉框</TITLE>

</HEAD>
<BODY >
<Script Language="Javascript">
var j = 0;
function SelectValue(obj)
…
[/Quote]

问下，假如数据现在有1000W条，也都要先读出来吗？？
andy1217 2008-10-30
  • 打赏
  • 举报
 回复
呵呵，谢谢楼上的，正在测试
winsongood 2008-10-30
  • 打赏
  • 举报
 回复
不需要用AJAX也可以实现，前2天我刚做过此效果，呵
不过我是先将所有数据读取出来，然后再根据输入去筛选的

完整代码如下，直接保存为HTML运行即可出效果了：



<HTML>   

<HEAD>   

<META http-equiv='Content-Type' content='text/html; charset=gb2312'>   

<TITLE>可输入的下拉框</TITLE>   



</HEAD>   

<BODY >   

  <Script Language="Javascript">

var j = 0;

function SelectValue(obj)

{

	var input = obj.parentNode.nextSibling;

	document.all.box2.value = obj.options[obj.selectedIndex].text;

	document.getElementById("txtSection").value=obj.options[obj.selectedIndex].value;

	alert(document.getElementById("txtSection").value);

}



function InputValue(obj)

{

	var n = 1;	

	var tmpObj;

	var src = document.all.SelectOption;

	var msg = document.all.msg;

	if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){

		if(obj.value!=""){

			 msg.style.display="";

			 msg.innerHTML="";

			 if(msg.hasChildNodes()) 

			 { 

				msg.childNodes[0].parentNode.removeChild(msg.childNodes[0]); 

			 }

			 

			 for (var i=0;i<src.length;i++){

			   var selValue = document.createElement("div");

			   var selText = document.createElement("div");

			   selText.value = src(i).value;

			   selText.innerHTML = src(i).text;		  



			   if (src(i).text.toLowerCase().indexOf(obj.value.toLowerCase())==0){ 

					selText.setAttribute("id","selText"+n);

					selText.onmouseover=function (){   

					this.style.backgroundColor='#003399';   

					this.style.color ='#ffffff'; 

				   }

				   selText.onmouseout=function (){   

					this.style.backgroundColor='#ffffff'; 

					this.style.color ='#000000';

				   }

				   selText.onclick=function (){   

					document.all.box2.value = this.innerHTML;

					msg.style.display="none";

					document.getElementById("txtSection").value=this.value;

				   }

					msg.appendChild(selText);

					n++;

			   }

			 }

		}

		else {

			document.all.msg.style.display="none";

		}

	}

	else {

		//press down key

		if(event.keyCode==40){

			j++;

			for (var i=0; i<src.length; i++)

			{

				tmpObj = document.getElementById("selText"+i);

				if(tmpObj != null){

					tmpObj.style.backgroundColor='#ffffff'; 

					tmpObj.style.color ='#000000';

				}				

			}

			tmpObj = document.getElementById("selText"+j);

			if(tmpObj != null){

				tmpObj.style.backgroundColor='#003399';   

				tmpObj.style.color ='#ffffff'; 

			}else{

				j = 0;

			}			

		}

		//press up key

		if (event.keyCode==38){

			j--;

			for (var i=0; i<src.length; i++)

			{

				tmpObj = document.getElementById("selText"+i);

				if(tmpObj != null){

					tmpObj.style.backgroundColor='#ffffff'; 

					tmpObj.style.color ='#000000';

				}				

			}

			tmpObj = document.getElementById("selText"+j);

			if(tmpObj != null){

				tmpObj.style.backgroundColor='#003399';   

				tmpObj.style.color ='#ffffff'; 

			}else{

				j = 2;

			}		

		}

		//press enter key

		if (event.keyCode==13){

			tmpObj = document.getElementById("selText"+j);

			document.all.box2.value = tmpObj.innerHTML;

			msg.style.display="none";

			document.getElementById("txtSection").value=tmpObj.value;

		}

	}

}



function SelMatch(src)

{

	var currSel = document.all.box2.value;

	for (var i=0;i<src.length;i++){

		if (src(i).text==currSel)

		{

			src.options(i).selected = true;

		}		

	}

}



function NoMsg()

{	

	if(document.activeElement.id=="msg") 

		return false; 

	else

		document.all.msg.style.display='none';

}





  </Script>

 <TABLE border=0 cellPadding=1 cellSpacing=0 width="100%">

   



	 <TR> 

      <TD width="24%"><font face="Arial" size="2">Section</font></TD>

      <TD COLSPAN=3 width="76%"> 



<div style="position:relative;">   

<span style="margin-left:230px;width:18px;overflow:hidden;">  



<select style="HEIGHT: 22px; WIDTH: 250px; margin-left:-232px;" onchange="SelectValue(this)" onclick="SelMatch(this)"  id="SelectOption" name="SelectOption" >   

  <OPTION value='ALL' Selected>ALL</OPTION>

<OPTION value='0TEST1'>0TEST1 = Testing 1

<OPTION value='0TEST1'>0TEST2 = Testing 1

<OPTION value='0TEST1'>0TEST3 = Testing 1

<OPTION value='SECTION'>SECTION = Section Description XXXXX AAA

</OPTION>  

</select></span>

<input name="box2" id="box2" style="width:230px;position:absolute;left:0px;" onkeyup="InputValue(this)"  onblur="NoMsg()" onfocus="this.select();InputValue(this)" value="0" >   

<div id="msg" style="border:1px  solid green;  font-size :14PX;white-space:nowrap;overflow:hidden;

width:230px;position:absolute;left:0px;top:20px;display:none"></div>

</div>



	<Input Type="Hidden" Name="txtSection" id="txtSection">

      </TD>

    </TR>

	</TABLE>

<p>



</BODY></HTML>
sy_binbin 2008-10-30
  • 打赏
  • 举报
 回复
不会就学啊

AJAX最主要的东西不在你说的第2段里

在第一段里的那些JS代码里呢
andy1217 2008-10-30
  • 打赏
  • 举报
 回复
对，就是第2段的哦
AJAX我不会呀
sy_binbin 2008-10-29
  • 打赏
  • 举报
 回复 1
[Quote=引用 3 楼 andy1217 的回复:]
谢谢楼上的两位
to-varlj:能否贴个例子出来呀？谢谢了
to-sy_binbin:能否麻烦你把第2段详细解释下？谢谢了
[/Quote]

哪个第2段？？查询数据库那段？？

就是模糊搜索，生成XML格式的数据！
six_shen_peng 2008-10-29
  • 打赏
  • 举报
 回复
用Ajax可以实现，我现在正在做呢，过两天我给你源代码啊
andy1217 2008-10-29
  • 打赏
  • 举报
 回复
谢谢楼上的两位
to-varlj:能否贴个例子出来呀？谢谢了
to-sy_binbin:能否麻烦你把第2段详细解释下？谢谢了
sy_binbin 2008-10-29
  • 打赏
  • 举报
 回复
http://blog.csdn.net/sandyxxx/archive/2008/02/03/2079690.aspx
参考下吧
varlj 2008-10-29
  • 打赏
  • 举报
 回复
感觉ext里面那个就挺漂亮的，用起来也挺不错
EasyUI 下拉菜单 下拉树 模糊搜索
支持下拉菜单 下拉树 模糊搜索,支持中间字段的匹配
select下拉带模糊搜索功能
附件下载可直接运行，特别好用
可输入的html下拉列表框，自带筛选
此框下拉列表框可输入，可根据输入内容自动过滤模糊查询到的option值，点击弹框下拉列表框，选择完毕后下拉列表框自动隐藏，非常好用
uniapp/h5多选模糊搜索下拉框（可以进行搜索匹配以及多选功能）
uniapp/h5通用模糊下拉搜索下拉多选框； 使用步骤： 1、下载资源包，并进行解压； 2、将components文件夹中的文件拷贝到自己项目的components文件夹中； 3、在业务文件夹中引用组件multipleDataPickey，使用实例如searchMultipleSelect.vue文件
jQuery模糊搜索框下拉选择代码
jQuery模糊搜索框下拉选择代码是一款模糊搜索组件，点击搜索框文本下拉框提示效果。
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章