|
1 实现的功能
**实现在搜索框中，根据首字符，模仿百度的联想词。可以实现点击事件，可以选中你所联想出的词语，鼠标移入移出也有特效。
不带任何js文件。
纯手工超简单的实现技巧！！！！
**
2 遇到的坑
***1.在执行onkeyup的最开始，要先删除id为pop的div
2.刚开始时，鼠标移入移出只能标记最后一个元素，后来查过很多资料，才发现，原来要在
循环内，使用闭包，(function(i){添加事件的代码}(i);,否则事件只能被最有一个元素使用
***
3 代码
jQuery UI Example Page
#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";
}
搜索
//创建测试数据
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 |