first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度搜索建议</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<input type="text" placeholder="输入关键词">
<ul>
</ul>
</body>
<script>
// => 箭头函数,function简写!!
// var name = fn() => {
// }
// var name = () => {
// }
var keyWordList = [
'今天', '今天天气不好', '天气是雨天', 'html', 'html学习', '不喜欢html',
'编程学习', '学习代码', '喜欢编程',
];
var newList = []
var input = document.querySelector("input");
var ul = document.querySelector("ul");
input.oninput = function () {
newList = []
if (input.value.length != 0) {
keyWordList.forEach(function (val, index) {
if (val.indexOf(input.value) > -1) {
// 获取 用户输入关键字在原字符串中的下标
let stringIndex = val.indexOf(input.value);
// 使用 substring 方法,提取 原字符串中 的 符合用户输入的字符
// let activeString = `<span style="color:red">${val.substring(stringIndex, stringIndex + input.value.length)}</span>`;
let activeString = `<span style="color:red">${input.value}</span>`;
// 替换原字符串中的关键词为带span的关键字
let newVal = val.replace(input.value, activeString)
newList.push(newVal)
}
});
ul.innerHTML = ""
newList.forEach(function (val, index) {
ul.innerHTML += `<li>${val}</li>`
})
console.log(newList);
} else {
ul.innerHTML = ""
}
}
</script>
</html>