77 lines
3.2 KiB
HTML
77 lines
3.2 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>
|
||
</head>
|
||
|
||
<body>
|
||
<input type="text" placeholder="输入关键字">
|
||
<ul>
|
||
</ul>
|
||
|
||
<script>
|
||
// 思路:1.获取input和ul的值
|
||
// 2.给input创建input事件
|
||
// 3.遍历list数组,拿用户输入的值(input.value)和list里面的数组做对比,前提时是大于-1,要做个if选择判断
|
||
// 4.把符合判断条件的值使用push方法追加进新数组中保存
|
||
|
||
// 5.遍历新数组,i的值实际上就是用户输入的值和list数组里面的值匹配正确的值,使用模板字符串渲染进ul里面
|
||
// 6.但此时有很多bug,要先置空再渲染进ul里面
|
||
// 6.外面整体要加判断,用户输入的值使用trim()方法去除俩端空格,判断是否为0,不为0执行里面的代码,为0责清空
|
||
|
||
// 7.最复杂的来了,如何把字变红?
|
||
// 8.使用substr(起始位置,截取长度),此方法是截取特定长度的字符串
|
||
// 这里面的起始位置其实就是indexof()返回的索引值,截取长度就是用户输入的值的长度
|
||
// 9.生成新的样式,并使用模板字符串包裹一层span标签返回给新数组,里面使用行内样式变成红色
|
||
// 10.把生成新的样式替换进新数组中即可
|
||
|
||
|
||
|
||
var list = ['html', '学习html', '天气很好吗', '你很好吗', 'JS学习', '不想学习', 'css测试', '明天要测试了'];
|
||
|
||
// 获取input的值
|
||
let input = document.querySelector('input');
|
||
// 获取ul的值
|
||
let ul=document.querySelector('ul');
|
||
|
||
|
||
// 为获取到的值注册input事件
|
||
input.oninput=()=>{
|
||
// 创建一个新数组,放在input事件里面,每次都会初始化,符合我们的要求
|
||
let newArr=[];
|
||
|
||
// 如果用户输入的值去除俩端空格的长度不为0
|
||
if(input.value.trim().length!=0){
|
||
// 遍历list数组
|
||
list.forEach((item,index)=>{
|
||
// 判断索引值是否大于0，大于0就放进一个新数组里面，并追加进ul里面
|
||
if(item.indexOf(input.value)>-1){
|
||
//获取下标
|
||
let newIndex=item.indexOf(input.value);
|
||
// 获取截取长度
|
||
let length=input.value.length;
|
||
//生成新的样式
|
||
let newStar=`<span style="color: red">${item.substr(newIndex,length)}</span>`;
|
||
// 返回给新数组,保存并返回
|
||
newArr.push(item.replace(input.value, newStar));
|
||
}
|
||
});
|
||
|
||
// 先置空再保留
|
||
ul.innerHTML='';
|
||
// 遍历新数组
|
||
newArr.forEach((i,j)=>{
|
||
ul.innerHTML+=`<li>${i}</li>`;
|
||
})
|
||
}else{
|
||
ul.innerHTML='';
|
||
}
|
||
};
|
||
</script>
|
||
</body>
|
||
|
||
</html> |