一、主要功能介绍:
1、生成UI结构,定义一个数组
2、获取表单元素
3、创建搜索框的键盘弹起事件
4、当在搜索框中输入内容时,遍历数组中的每一个元素,将其中的每一个元素与输入框中输入的元素相匹配,如果能匹配上就将该内容渲染到提示列表中
5、如果输入内容,显示提示列表 ,如果没输入内容,隐藏提示列表
6、通过trim() 去掉左右两边的空格,因为空格能匹配所有字符
二、详细步骤解析:
HTML和CSS代码:
主要练习js不用写的太花里胡哨
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 400px;
height: 600px;
margin: 50px auto;
}
.container #val {
padding-left: 20px;
width: 260px;
height: 30px;
outline: none;
}
#btn {
width: 60px;
height: 33px;
}
.show {
display: none;
width: 283px;
/* height: 400px; */
border: 1px solid #ccc;
}
.show p {
height: 30px;
margin-left: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="val" placeholder="搜索">
<input type="button" value="按钮" id="btn">
<div class="show"></div>
</div>
JS代码:
这个才是重点,有些部分是用的ES6中的语法,箭头函数 let 等,因为这是趋势,所以大家多多练习
箭头函数 : ( ) => { } 和函数 function( ){ } 基本是一样的
let 和 var 也基本是一样的, let有局部变量,不能重复定义相同变量等特点
里面的注释很详细,有疑问欢迎评论!respect!!!!
<script>
let str = "";
//定义一个数组,指直接在数组中定义元素,以后学完Ajax就能在服务器中请求数据,这里只是练习
let arr = ["华为手机", "apple手机", "手表", "手电筒", "小米手机", "oppo手机", "平板电脑", "三星手机", "手机支架", "手套"]
// 当在输入框中按下键的时候,显示扩展的词
var val = document.querySelector("#val");
var show = document.querySelector(".show");
val.onkeyup = function() {
// 每次获取时先清空里面原有的,否则会重复
str = "";
show.style.display = "block";
// 获取里面的数据
var value = val.value.trim();
// 匹配arr中的每一项
arr.forEach((item) => {
// 如果里面没有能匹配的字符就隐藏show页面,否则会有边框
if (value.length == 0) {
return show.style.display = "none"
}
let res = item.indexOf(value);
if (res != -1) {
str += "<p>" + item + "</p>"
}
})
show.innerHTML = str;
// 判断如果里面没有数值,直接隐藏show
}
</script>