suggest提示框

最新推荐文章于 2023-11-30 16:11:03 发布

最新推荐文章于 2023-11-30 16:11:03 发布 · 428 阅读

文章标签：

#Microsoft #XML

Javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现输入框自动提示功能的方法。通过div标签和table结构展示建议列表，并利用JavaScript监听键盘事件来更新显示的内容。

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

在html中放入div标签

     
     <div id="popup" style="POSITION: absolute; ">
        <table id="table1" cellspacing="0" cellpadding="0"  
               bgcolor="#fffafa" border="0" >
         <tbody id="body1">
         </tbody>
        </table>
       </div>

每个input加载提示框使用的事件是οnfοcus="search.setOffset(this);"
缺省部分：还没有完成异步载入后台的数据部分。现在提示数据是虚拟的，写在了js里
dataList:["abcd","afg","ahj","bert","bhjk","batt","ctthj","cadss","ccas","cdghh","cca","drtyg","aafg","eaaa"],
[b]search.js[/b]


var search={
	 divEle:null,
   tabEle:null,  
   bodyEle:null,
   iuputEle:null,
   request:null,
   selectedIndex:-1,
   dataList:["abcd","afg","ahj","bert","bhjk","batt","ctthj","cadss","ccas","cdghh","cca","drtyg","aafg","eaaa"],
   init:function(){
   	   search.divEle=document.getElementById("popup");
   	   search.tabEle=document.getElementById("table1");
   	   search.bodyEle=document.getElementById("body1");
       search.divEle.style.display="";   
   },  
   getXMLHttpRequest:function(){
       if(search.request==null)
       {
          if(window.ActiveXObject)
             {
       	    search.request= new ActiveXObject("Microsoft.XMLHTTP");
       	    }else if(window.XMLHttpRequest)
       		{
         		 search.request= new XMLHttpRequest();
      		 }
       		else{
       		      search.request=false;
       		    };
       		};
   },

   retrieveData:function(method,url,boolvalue){
   			search.request.open(method,url,boolvalue);

   },

   addSuggestNode:function(tabTbodyEle,text){
       var trEle = document.createElement("tr");
       var tdEle = document.createElement("td");
       tdEle.onmouseout = function(){tdEle.style.backgroundColor='';};
       tdEle.onmouseover = function(){tdEle.style.backgroundColor='#ffdd00';};

       tdEle.onclick = function() 
       { 
       		search.inputEle.value=this.firstChild.nodeValue;
       		search.clearNames();
       }

       tdEle.onmousedown = function() 
       { 
       		search.inputEle.value=this.firstChild.nodeValue;
       		search.clearNames();
       }
       var textNode = document.createTextNode(text);
       tdEle.appendChild(textNode);
       trEle.appendChild(tdEle);
       tabTbodyEle.appendChild(trEle);

   },   
   setName:function(searchTextvalue){
       var str=searchTextvalue.replace(/^\s+|\s+$/g,"");
       if(str=="")
       {
       		search.clearNames();
       		return;
       }
       search.clearNames();

       for(var i=0;i<search.dataList.length;i++){
           if(search.dataList[i].toLowerCase().indexOf(str.toLowerCase())==0)
           {var text=search.dataList[i];
           search.addSuggestNode(search.bodyEle,text);}
       }
       search.divEle.style.display="";
   },   
   clearNames:function(){
       while(search.bodyEle.childNodes.length!=0)
       {
       	search.bodyEle.removeChild(search.bodyEle.childNodes[0]);
       }
       this.divEle.style.border="none";
       this.tabEle.style.border="none";
   },   
   setOffset:function(inputEle){
      search.inputEle=inputEle;   
    	search.divEle.style.width=inputEle.offsetWidth+"px";
   		search.tabEle.style.width=inputEle.offsetWidth+"px";
   		var left = this.calculateOffset(inputEle, 'offsetLeft');
      var top = this.calculateOffset(inputEle, 'offsetTop') + inputEle.offsetHeight;
      search.divEle.style.border = "black 1px solid";
      search.divEle.style.left = left + "px";
      search.divEle.style.top = top + "px";
      search.divEle.style.display="none";
      search.clearNames();
      search.inputEle.onkeyup=search.checkKey;
      search.inputEle.onblur=function(){search.clearNames();};
   },   
   calculateOffset:function(field, attr) 
     {
        var offset = 0;
       while(field){
       offset += field[attr]; 
       field = field.offsetParent; }
         return offset;
     },
    checkKey:function(evt)
    {
    	evt = evt || window.event;
  		var keyCode = window.event ? evt.keyCode : evt.which;
  		if (keyCode==40||keyCode==38)
  		{//下上
   		     var isUp=false;
   		    if(keyCode==40) isUp=true;
  		    search.changeSelection(isUp);
 		 }
 	          else if (keyCode==13)
 		 {//回车
  		       search.clearNames();
  		 }
  		else
  		{
  		      search.setName(search.inputEle.value);
  		}

 },  
    changeSelection:function(isUp)
  {
   if (isUp)
    {
    search.selectedIndex++;
    }
   else
    search.selectedIndex--;
  var maxIndex = search.bodyEle.childNodes.length-1;
  if (search.selectedIndex<0){search.selectedIndex=0;}
  if (search.selectedIndex>maxIndex) {search.selectedIndex=maxIndex;}
  for (var i=0;i<=maxIndex;i++)
  {

   if (i==search.selectedIndex)
   {
    search.bodyEle.childNodes[i].firstChild.style.backgroundColor='#ffff00';
    search.inputEle.value=search.bodyEle.childNodes[i].firstChild.firstChild.nodeValue;
   }
   else
   {
    search.bodyEle.childNodes[i].firstChild.style.backgroundColor='';
   }
  }
 },
  outSelection:function(Index)
 {
 	if(search.bodyEle.childNodes[Index])
 	{ 	
		 return;
 	} 	
  search.inputEle.value = search.bodyEle.childNodes[Index].firstChild.nodeValue;
  search.clearNames();
 },
   addEvent: function(elm, evType, fn, useCapture){
  if (elm.addEventListener){
   elm.addEventListener(evType, fn, useCapture);
   return true;
  } else if (elm.attachEvent) {
   var r = elm.attachEvent('on' + evType, fn);
   return r;
  } else {
   elm['on' + evType] = fn;
  }
 }
}

search.addEvent(window,'load',search.init,false);

[b]Input.js[/b]


var xmlHttp;
var font= "12px verdana, geneva, tahoma,lucida, arial, sans-serif,simsun,bitstream,nimbus";
even_width="25%";
even_background="DFECF5";
odd_background="#F4F4F4";

function createXMLHttpRequest(){
if(window.ActiveXObject){
	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         }else if(window.XMLHttpRequest){
	     xmlHttp = new XMLHttpRequest();
	if(xmlHttp.overrideMimeType){
	     xmlHttp.overrideMimeType("text/xml;charset=UTF-8");
	}
	}
}

function addTestcase(){
	var table = document.getElementById("testcaseTable");
	var row = table.insertRow(table.rows.length);
	var col = row.insertCell(0);
    col.innerHTML = "<input name='classPath' type='text' size='50' onfocus='search.setOffset(this)'/>";
    if(table.rows.length>1)
    	document.getElementById("deleteTcButton").disabled=false;
    if(table.rows.length==5)
    	document.getElementById("addTcButton").disabled=true;
}

function deleteTestcase(){
	var table = document.getElementById("testcaseTable");
	table.deleteRow(1);
	if(table.rows.length==1)
    	document.getElementById("deleteTcButton").disabled=true;
    if(table.rows.length<5)
    	document.getElementById("addTcButton").disabled=false;
}

[b]searchtest.html[/b]


<html><head>
<meta http-eqvi="Content-Type" content="text/html; charset=gb2312">
<title>search test</title>	
<script type="text/javascript" src="search.js"></script>
<script type="text/javascript" src="Input.js"></script>
</head>
<body>
      <div id="popup" style="POSITION: absolute; ">
        <table id="table1" cellspacing="0" cellpadding="0"            bgcolor="#fffafa" border="0" >
         <tbody id="body1">
         </tbody>
        </table>
       </div>
<TR>
<TD class="double_even"><table id="testcaseTable"><tr><td><input type="text" id="tcClassPath" name="classPath" size="50" onfocus="search.setOffset(this);"></td></tr></table></TD>

<TD class="double_odd"><div class="button-blue_big" align="left"><input id="addTcButton" type="button" class="button-blue_big" value="Add testcase..." onclick="addTestcase()"></div></TD>

<TD class="double_odd"><div class="button-blue_big" align="left"><input id="deleteTcButton" type="button" class="button-blue_big" value="Delete testcase..." disabled="disabled" onclick="deleteTestcase()"></div></TD>
		</TR>
</body>
</html>