javascript智能提示框小例证-JavaSript-爱易网页

javascript智能提示框小例证

日期：2014-05-16　浏览次数：20441 次

javascript智能提示框小例子



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
 
   <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="jquery.js"></script>
 </head>
 <body>
  
<div id="opt" style="z-index10; width: 168px;position:absolute;border:1px solid black;display: none" ></div> 
<input name="inputTest" id='inputTest' size="22" onkeyup="prompt('inputTest',event)" onblur="bodyClick('inputTest',event)"/>  
 </body>
 
 <script type="text/javascript">

 function prompt(obj,event){
var kc = window.event?event.keyCode:event.which;
//如果是键盘方向左键或右键则不做任何操作
if(kc==37 || kc ==39){
	return;
}
  	 var cs = document.getElementById(obj);
    var opt = document.getElementById("opt");
    opt.style.display="";
    
   var left = cs.getBoundingClientRect().left;
   var scroll = document.body.scrollTop;
   var top =cs.getBoundingClientRect().top+scroll;

    opt.style.left=left;
    opt.style.top = top+23;

    var kc = event.keyCode;
    //去空格
    var code = cs.value.trim();


  var attr;
  //此处用于模拟从服务端取出xml数据,真实环境下应为通过你输入的内容模糊查询数据库的数据,用ajax实现.
  var xmlStr = '<?xml version="1.0" encoding="utf-8" ?><results><result code="111" name="aaa"></result><result code="222" name="bbb"></result><result code="333" name="ccc"></result></results>';
  var moz = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined');
	//读XML
	//如果为IE
     if (window.ActiveXObject){
     	var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
     	xmlDoc.async = false;
      xmlDoc.loadXML(xmlStr);
      attr=xmlDoc.getElementsByTagName("result");
     }
     //如果为firefox
     if(moz){
     	var xmlDoc = document.implementation.createDocument("", "doc", null);
     	xmlDoc.async = false;
     	domParser = new  DOMParser();
       xmlDoc = domParser.parseFromString(xmlStr, 'text/xml');
     	attr=xmlDoc.getElementsByTagName("result");
     	//alert(attr.length);
     }
     //根据从服务端取出的xml数据生成一个提示框table
      var table ="<table id='valTab' width='100%' cellpadding='0' cellspacing='0' height='100%'>";
      for(var i=0;i<attr.length;i++){
     	table+="<tr style='padding: 0;margin: 0;' onmouseover='tabMouseOver(this)' onmouseout='tabMouseOut(this)'   bgcolor='#F0FFFF'>";
     	table+="<td id='aa"+i+"' style='padding: 0;margin: 0;'  width='100%' onclick=tabClick(this,'"+obj+"')>";
     	table+=attr[i].getAttribute("code")+"："+attr[i].getAttribute("name");
     	table+='</td></tr>'; 
     }
     table+="</table>"
     opt.innerHTML = table;
     //alert(table);
     //如果数据为空则显示框不显示
    if(attr.length==0){
     	opt.style.display="none";
     }
     	//按钮 38 上  40下 13 回车 
     	if(kc == 40 || kc ==38 || kc ==13){
       		downOrUp(kc,obj);
       }
       else
       {
       	line = -1;
       }
 }
	var line = -1;
	
	function downOrUp(kc,obj){
	var tabLen =  $("#valTab tbody tr").length;
	if(tabLen==1){
		document.getElementById('valTab').rows[0].style.backgroundColor ='#6495ED';
		document.getElementById('valTab').rows[0].style.color ='white';
		if(kc==13){
			var selectVal = $("#valTab tbody tr").eq(0).find("td").eq(0).html();
			var index = selectVal.indexOf('：');
			var code = selectVal.substring(0,index);
			document.getElementById(obj).value=code;
			document.getElementById(obj).focus();
	bodyClick1();
		}
		return;
  				}
		if(kc == 40){
		line++;
		line =(line==tabLen?0:

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

javascript智能提示框小例证

相关资料更多>

推荐阅读更多>