1 实现的功能
**实现在搜索框中，根据首字符，模仿百度的联想词。可以实现点击事件，可以选中你所联想出的词语，鼠标移入移出也有特效。 不带任何js文件。 纯手工超简单的实现技巧！！！！ **
2 遇到的坑
***1.在执行onkeyup的最开始，要先删除id为pop的div 2.刚开始时，鼠标移入移出只能标记最后一个元素，后来查过很多资料，才发现，原来要在 循环内，使用闭包，(function(i){添加事件的代码}(i);,否则事件只能被最有一个元素使用 ***
3 代码
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<style type="text/css">
#box{display: inline-block;}
/* li去掉前面的圆点 */
ul,li{list-style:none;}
/*cursor: pointer：可以变成小手； */
#box li{line-height:35px;font-size:14px;cursor: pointer;}
.search #txt{
width:180px;
height:29px;
border:2px solid #CCCCCC;
outline:none;
font:14px/30px "microsoft yahei";
}
.search .btn_search{
background:#CCCCCC;
width:80px;
height:34px;
color:white;
border:none;
outline:none;
font:14px/34px "microsoft yahei";
}
</style>
</head>
<body>
<div class="search">
<input type="text" id="txt" value="" placeholder="请输入岗位名称" /><button class="btn_search">搜索</button>
</div>
<div id="box">
</div>
<!--
实现的功能：实现在搜索框中，根据首字符，模仿百度的联想词。可以实现点击事件，鼠标移入移出也有特效。
遇到的坑：1.在执行onkeyup的最开始，要先删除id为pop的div
2.刚开始时，鼠标移入移出只能标记最后一个元素，后来查过很多资料，才发现，原来要在
循环内，使用闭包，(function(i){添加事件的代码}(i);,否则事件只能被最有一个元素使用
不足：只实现了首字符的联想，如字符在中间则无法联想。
-->
<script>
//创建测试数据
var array =['aa','abc','abcsdfssf','abcsdfs','abdfsfew','bgersd','计算机网络工程师','bvdfbsv']
// var array=["网络工程师","工程师","java","C/C++","python","软件工程师",'前端','后端'];
//获取文本框注册keyup事件
document.getElementById('txt').onkeyup=function(){
// console.log("输入次数")
var divBox = document.getElementById('box');
//重点： 判断id为pop的div是否存在如果存在应删除
if (document.getElementById("pop")) {
divBox.removeChild(document.getElementById("pop"));
}
//临时数组
var tmpArray = [];
//获取数据源中的每一条数据
for(var i=0;i<array.length;i++){
//找到以你输入的内容为开头的所有数据
if(array[i].indexOf(this.value) === 0){
//将找到的数据push到临时数组中
tmpArray.push(array[i]);
}
}
//临时数组为空时，不新建显示框
if(tmpArray.length === 0){return;}
//如果搜索框没有值时也不新建显示框
if(this.value.length === 0){
//如果此时已经有了显示框，应该除去
if(document.getElementById("pop")){
divBox.removeChild(document.getElementById("pop"));
}
return;
}
//临时数组有数据
var dvObj = document.createElement("div");
dvObj.id = "pop";
//将div添加到box中
divBox.appendChild(dvObj);
var ulObj=document.createElement("ul");
//将ul添加到dvObj中
dvObj.appendChild(ulObj);
//遍历临时数组，动态创建li
for(var i = 0;i<tmpArray.length;i++){
//重点：使用闭包
(function(i){
var liObj = document.createElement("li");
liObj.id =i;
liObj.innerHTML =tmpArray[i]
//将tr添加到ulObj中
ulObj.appendChild(liObj);
// 设置点击事件
liObj.addEventListener("click", Foo, false);
liObj.addEventListener("mouseenter", Foo1, false);
liObj.addEventListener("mouseout", Foo2, false);
function Foo()
{
// alert("测试"+i);
// alert(tmpArray[i]) //测试
document.getElementById('txt').value =tmpArray[i]
// 判断id为pop的div是否存在如果存在应删除
if (document.getElementById("pop")) {
divBox.removeChild(document.getElementById("pop"));
}
}
function Foo1(){
// 在真正开发时，可以只改变文字的颜色：color:red;
liObj.setAttribute('style','background-color: #FF0000;')
}
// liObj.removeEventListener("mouseenter",Foo1,false);
function Foo2(){
liObj.setAttribute('style','background-color:;')
}
}(i));
}
}
</script>
</body>
</html>
