纯javascript，置百度自动补全
日期：2014-05-16 浏览次数：20525 次
纯javascript，放百度自动补全
下面是js代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var inputVlaue;
var div;
var ul;
var ccc ;//= ["111","222","2","3332","233","333","444","555","666","777","888","999"];
var index = -1;
/*初始化变量*/
function init(){
inputVlaue = document.forms["myForm1"].colors;
div = document.getElementById("popup");
ul = document.getElementById("colors_ul");
}
/*更新北京*/
function updateBg(){
for(var i=0;i<ul.getElementsByTagName('li').length;i++){
ul.getElementsByTagName('li')[i].className = "clear";
}
}
function start(event){
//兼容IE
event = event || window.event;
//如果按了down键
if(event.keyCode==40){
index = index + 1;
//如果“提示”列表已经显示,则把焦点切换到列表中的第一个数据项上
if(index == ul.getElementsByTagName('li').length){
index = 0;
updateBg();
ul.getElementsByTagName('li')[index].className = "over"
inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
}else{
updateBg();
ul.getElementsByTagName('li')[index].className = "over"
inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
}
return false;
}
//如果按了up键
else if(event.keyCode==38){
index = index - 1;
//alert(index);
//如果“提示”列表已经显示,则把焦点切换到列表中的最后一个数据项上
if(index == -2){
index = 0;
updateBg();
ul.getElementsByTagName('li')[index].className = "over"
inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
}else if(index == -1){
index = ul.getElementsByTagName('li').length - 1;
updateBg();
ul.getElementsByTagName('li')[index].className = "over"
inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
}else{
updateBg();
ul.getElementsByTagName('li')[index].className = "over"
inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
}
return false;
}else if(event.keyCode==13){
div.className = "show";
return false;
}else{
index = -1;
init();
ajaxFunction(inputVlaue.value);
}
}
/*清空*/
function clearField(){
for(var i = ul.childNodes.length - 1; i >=0; i--){
ul.removeChild(ul.childNodes[i]);
}
div.className = "hide";
}
/*设置显示*/
function setField(pipei){
/**/
div.className = "show";
clearField();
var oLi;
for(var i = 0;i<pipei.length;i++){
oLi = document.createElement("li");
ul.appendChild(oLi);
oLi.appendChild(document.createTextNode(pipei[i]));
oLi.onmousemove = function(){
updateBg()
this.className = "mouseover";
}
oLi.onmouseout = function(){
updateBg()
this.className = "mouseout";
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
