JS实现关键字搜索下拉字段

最新推荐文章于 2023-07-20 10:06:53 发布

Fernando的十年

最新推荐文章于 2023-07-20 10:06:53 发布

阅读量802

点赞数

CC 4.0 BY-SA版权

分类专栏： html/css/js 文章标签： js 实现关键字搜索下拉选项

本文链接：https://blog.youkuaiyun.com/sh_c1991/article/details/38374069

html/css/js 专栏收录该内容

6 篇文章

订阅专栏

这篇博客展示了如何使用JavaScript实现关键词搜索功能，当用户在输入框中输入时，会动态显示匹配的下拉选项。通过定义sources数组存储可搜索的网址，利用indexOf方法比较用户输入与数组元素，动态更新表格展示匹配项。同时，实现焦点和失去焦点时的样式变化，以及选中下拉选项填充到输入框的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>Hello World</title>
<link href="style.css" rel="stylesheet" type="text/css">

<script  type="text/javascript">
	sources= new Array("www.sina.com","www.baidu.com","www.google.com","www.sina.org","www.baidu.ogr.cn");
	tabinfo = "";
    flag = new Array(sources.length);
	for(var i=0;i<flag.length;i++)
		flag[i] = false ;
	
	function immediately(){
		
		var element = document.getElementById("i1");
		if("\v"=="v") {
			element.onpropertychange = webChange;
		}else{
			element.addEventListener("input",webChange,false);
		}
		function webChange(){
			var tab = document.all("dl1");
			for(var i=0;i<flag.length;i++)
				flag[i] = false ;//重新初始化
			if(element.value){
				var content = document.getElementById("i1").value;
				for(var i = 0 ;i < sources.length ; i ++){
					if(sources[i].indexOf(content) != -1){
						flag[i] = true;		
					}
				}
				for(var j=0;j<flag.length;j++){
				    
					if(flag[j]){//sources[j]有与文本框文字相同的内容
						if(tab.rows.length>0){
							for(var k=0;k<tab.rows.length;k++)
								if(tab.rows[k].cells[0].innerText.indexOf(content) == -1)
									tab.deleteRow(k);
						}
						for(var k=0;k<tab.rows.length;k++){
							tabinfo += tab.rows[k].cells[0].innerText;
						}	
						if(tabinfo.indexOf(sources[j]) == -1){	
							nrow = tab.insertRow(0);
							newcell = nrow.insertCell();
							newcell.innerHTML = sources[j] 
						}
						tabinfo = "";
					}
					
					
				}
			}
		}
	}

</script>
<script language="javascript">
   var lastObj=null;  
   function backBlack(){
       event.srcElement.style.background="gray";
	   forceBackC6();
	   if(event.srcElement.tagName=="TD"){
	        lastObj=event.srcElement;
	   }
	   fillData();
    }
   function backC6(){
       event.srcElement.style.background="#CCCCCC";
    }
   function forceBackC6(){
      if(lastObj!=null)
       lastObj.style.background="#F8F8FF";
    }


   function fillData(){
       if(lastObj.innerHTML!=null)
          document.all.i1.value=lastObj.innerHTML;  
    }
	
   function init(){
	   Layer1.style.top=i1.offsetTop+40;
	   Layer1.style.left=i1.offsetLeft;
	   Layer1.style.visibility="visible";
	}
   function hideBelow(){
       Layer1.style.visibility="hidden";
   }
</script>

</head>
<body>
<input type="text" id="i1"  style="height:20px" onFocus="init()" onBlur="hideBelow()"  />
<script type="text/javascript">
immediately();
</script>
<div id="Layer1">
  <table id="dl1" class="midHead" cellspacing="0" onMouseOut="backC6()" onMouseOver="backBlack()"  border="0" >
    
  </table>
</div>

<br>

</body>
</html>