body {
font-size: 20px;
}
.box {
width: 600px;
height: 40px;
margin: 200px auto;
position: relative;
}
#txt {
width: 498px;
height: 38px;
border: 1px solid #ccc;
font-size: 20px;
}
#search {
width: 100px;
height: 40px;
}
#keywords {
position: absolute;
top: 40px;
left: 0;
background-color: #6cf;
list-style: none;
width: 500px;
}
li {
line-height: 24px;
}
思路分析
思路分析
补充技术：用户输入的事件 oninput onkeyup onkeydown
只要用户输入内容：就会触发事件
-
获取事件源：#txt
-
确定事件类型：oninput
-
事件处理
3.1 获取用户输入的数据：input框的value属性
3.2 用户每输入多一个内容（或者少）：应该先清空原来匹配的结果：ul.innerHTML = '';
3.3 安全处理：用户输入的数据，有可能带空格，一般需要帮助用户去除两边的空格：目标字符串.trim()：去除目标两边的空格
3.4 安全处理：如果用户输入的字符串是空的（没有输入）：不需要进行服务器处理（下一步没有必要执行）：结束事件函数；return
3.5 去服务器匹配数据：但是不是去数组中找，而是遍历数组：看数组的元素中是否包含用户输入的关键字
3.5.1 判定：词条中是否包含用户输入的关键字：词条.indexOf(关键字) != -1 ：包含关键字
3.5.2 将关键字放到li中，放到ul#keywords下
3.5.2.1 创建li：document.createElement('li')
3.5.2.2 添加内容：li.innerText = 词条
3.5.2.3 将li放到ul中
完整代码
Document