本文已参与「新人创作礼」活动，一起开启掘金创作之路
在百度等网站搜索时，输入一个字，系统会弹出包含该关键字的一些搜索词。
这个是功能性的需求啦！！需要后端的数据库配合完成的啦！但是咱做个假的也是一种学习进步嘛！真心觉得这个功能不仅仅是对用户超友好（尤其是在商城类的项目中），对我这种开发小白的吸引力也是超大的。感觉超厉害的，所以就去学习了一下啦！！ 主要还是用的JS去对接一下数据（当然，这篇笔记里面是用的假数据啦！！主要用于测试功能嘛），然后进行字符的匹配，给用户提供一些简介明了的选择
仿百度搜索框输入关键字自动弹出符合条件的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box">
<input type="text" id="inp">
<input type="button" value="百度一下">
<ul id="ul"></ul>
</div>
<script src="JavaScript/JavaScript.js"></script>
<script>
var list=["吃火锅","吃火锅","火锅","吃123"];
// 键盘抬起事件
$myid("inp").onkeyup=function () {
console.log(this.value);
// 优化3：删除之前列表，显示新的列表
$myid("ul").innerHTML="";
// 1、根据关键字显示搜索列表的关键字
var newList=[];
var keyWord=this.value;
for (var i =0;i<list.length;i++){
//找包含关键字的
/*if (list[i].indexOf(keyWord)!==-1) {
}*/
//找以关键字开头
if (list[i].indexOf(keyWord)===0){
newList.push(list[i]);
}
}
//优化4:当长度为0时，不显示列表
if (keyWord.length===0){
return;
}
console.log(newList);
//2、根据新数组创建列表
newList.forEach(function (item,i) {
var liObj = document.createElement("li");
liObj.innerText=item;
$myid("ul").appendChild(liObj);
//鼠标移上去，显示背景颜色
liObj.onmouseover=function () {
this.style.backgroundColor="pink";
};
//鼠标移下来，背景颜色消失
liObj.onmouseout=function () {
this.style.backgroundColor="";
}
});
}
</script>
</body>
</html>
list中的内容可以自己定义 该案例只适用于中文（你如果觉得开心也可以定义英文）
