100 lines
4.0 KiB
HTML
100 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
<style>
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div>
|
||
<input type="text" placeholder="请输入搜索关键字">
|
||
<!-- 空一个ul用来将空数组里存储的匹配值放到html上显示给用户选择 -->
|
||
<ul>
|
||
</ul>
|
||
</div>
|
||
|
||
</body>
|
||
<script>
|
||
// 这是推荐词组具体包含内容
|
||
var words = ['今天天气真好', 'html学习', '不喜欢html', '热爱学习', '天气不好，是阴天', '不喜欢学习'];
|
||
|
||
function $(className) {
|
||
return document.querySelector(className)
|
||
}
|
||
|
||
var input = $('input')
|
||
// console.log(input);能打印出来，所以获取节点成功
|
||
|
||
var ul = $('ul')
|
||
|
||
|
||
// 绑定事件:oninput用户输入事件
|
||
input.oninput = function () {
|
||
// console.log(input);能打印出来，绑定事件成功
|
||
|
||
|
||
var pipei = []
|
||
// 定义一个空数组来存储我输入内容能匹配上推荐词组里面相关的具体值
|
||
|
||
// 输入时触发，所以首先用if判断input里面有无输入值（由input.value获取具体文本值）,有则执行下一个内容
|
||
// 用输入值的长度是否为0判断，有无输入值
|
||
if (input.value.length != 0) {
|
||
// console.log(input.value);能获取input里面具体输入的文本值，所以属性选择成功
|
||
|
||
|
||
|
||
// 有值则判断该值是否为定义词组所包含的值，因为定义词组是一个数组，所以需要循环比较数组里的每一项是否包含该值
|
||
words.forEach((value, index) => {
|
||
// console.log(value,index)//当输入时能获取定义词组里的每一项值,所以循环成功
|
||
|
||
// 拓展：indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置（即下标）。如果没有找到匹配的字符串则返回 -1。
|
||
|
||
// if判断是否为数组含有内容，用父 indexof 子 返回值判断，>-1则包含，
|
||
// 然后将数组符合值取出，追加到新数组里进行后续使用
|
||
if (value.indexOf(input.value) > -1) {
|
||
|
||
// 定义一个span标签放入用户输入的值，值的颜色变红
|
||
var span = `<span style="color: red;">${input.value}</span>`
|
||
|
||
// 拓展：直接使用“str.replace("需要替换的字符串","新字符串")”来替换;
|
||
|
||
// 定义一个li标签，便于将词组里面的每一项放入html上，供用户选择
|
||
// 然后在li标签定义词组里面，将用户输入的值替换标红的span标签
|
||
var li = `<li> ${ value.replace(input.value, span) } </li>`
|
||
|
||
// 完成以后，将数组符合值取出，追加到新数组里进行后续使用
|
||
pipei.push(li)
|
||
|
||
|
||
// var span = `<span style="color: red;">${ $("input").value }</span>`
|
||
// searchList.push(v.replace($("input").value, span))
|
||
}
|
||
|
||
})
|
||
// console.log(pipei);新组装数组打印成功，数组导入成功
|
||
}
|
||
|
||
// 清楚是为了删除上一次得到的结果。
|
||
// 例：在不加的情况下，我输入1，得到的结果是1的结果，然后我追加一个2，得到的结果是12.
|
||
// 以上总共得到的结果是1和12的结果。
|
||
// 然而应该得到的是当前输入的结果匹配的集合，即只需要给我12的结果就可以了。
|
||
// 空数组理由同上
|
||
|
||
ul.innerHTML = ''
|
||
|
||
// 具体着手操作，将ul、li添加到html
|
||
// 考虑到li的数量没办法确定，所以用循环来判断和控制li的数量
|
||
if (pipei.length > 0) {
|
||
pipei.forEach((item, ind) => {
|
||
ul.innerHTML += item
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
</html> |