AutoComplete，水平有限做不下去了，求高人,该怎么处理
日期：2014-05-16 浏览次数：20404 次
AutoComplete，水平有限做不下去了，求高人
这个很多问题，还有很多功能没实现
我想达到类似GOOGLE的效果
如：
1、鼠标在其它地方点击，提示框隐藏
2、上下方向键控制热点，文本框内容自动填充
3、在热点上按回车键触发事件
4、鼠标点击热点触发事件
这个很多问题，还有很多功能没实现
我想达到类似GOOGLE的效果
如：
1、鼠标在其它地方点击，提示框隐藏
2、上下方向键控制热点，文本框内容自动填充
3、在热点上按回车键触发事件
4、鼠标点击热点触发事件
- HTML code
<!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=gb2312" />
<title>test </title>
<style type="text/css">
body,html{ margin:0; padding:0;}
.box{ margin:100px; float:left; clear:both; position:relative; width:600px; height:100px; border:1px solid #CCCCCC;}
.info{width:202px; width:204px \9; height:auto; border:1px solid #CCCCCC; background:#FFFFFF; border-top:none; position:absolute;top:51px; left:100px; display:none;}
.info ul{ margin:0; padding:0;}
.info li{ clear:both; float:left; width:100%; line-height:22px; text-indent:5px;list-style:none; font-size:12px; cursor:default;}
.info_hover{ background:#FF6600;}
</style>
</head>
<body>
<div class="box">
<div class="info" id="info">
<ul>
<li>中国成为世行第3大股东国 </li>
<li>折射世界政治经济版图变化 </li>
<li>周强任湖南省委书记 </li>
<li>张春贤任新疆自治区党委书记 </li>
</ul>
</div>
<input type="text" name="search" id="search" value="" style=" position:absolute; left:100px; top:30px; width:200px;" />
</div>
<script type="text/javascript">
var easychange = function(foochange){
if(!foochange||foochange.constructor!=Function){return;}
try{this.watch("value",function(id,oldval,newval){foochange(newval);return newval;});}catch(e){}
this.setAttribute('oninput','('+foochange.toString()+')(this.value)');
this.onpropertychange = function(){foochange(this.value);};
//this.onmousemove = function(){foochange(this.value);};
//this.onkeyup = function(){foochange(this.value);};
};
var dx = document.getElementById('search');
var info = document.getElementById('info');
var s=document.getElementById("search");
var sear=function(newvalue){
if(newvalue!=""){
info.style.display="inline";
var index=0;
var li=document.getElementsByTagName("li");
for(i=0;i <li.length;i++){
(function(m){
li[m].onmouseover=function(){this.className="info_hover"}
li[m].onmouseout=function(){this.className=""}
}
)(i)
}
window.onkeydown=document.body.onkeydown=function (e){
switch ((window.event||e).keyCode){
case 38:ud(-1);break;
case 40:ud(1);break;
}
}
function ud(n){
index+=n;
if(index <0)index=li.length-1;
if(index>li.length-1)index=0;
for(i=0;i <li.length;i++){
li[i].className="";
}
li[index].className="info_hover";
s.value=li[index].innerHTML;
}
}
else{
info.style.display="none";
}
}
easychange.call(dx,sea
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
