46 lines
1.2 KiB
HTML
46 lines
1.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>
|
|
</body>
|
|
<script>
|
|
var arr = ['今天天气真好', 'html学习', '不喜欢html', '热爱学习', '天气不好，是阴天', '不喜欢学习'];
|
|
var searchList = [];
|
|
|
|
$("input").oninput = function () {
|
|
searchList = []
|
|
if ($("input").value.length != 0) {
|
|
arr.forEach(function (v, i) {
|
|
if (v.includes($("input").value)) {
|
|
var span = `<span style="color: red;">${$("input").value}</span>`
|
|
searchList.push(v.replace($("input").value, span))
|
|
}
|
|
});
|
|
renderLi();
|
|
} else {
|
|
$("ul").innerHTML = ""
|
|
}
|
|
}
|
|
function renderLi() {
|
|
$("ul").innerHTML = ""
|
|
searchList.forEach(function (v, i) {
|
|
$("ul").innerHTML += `<li>${v}</li>`
|
|
})
|
|
}
|
|
function $(className) {
|
|
return document.querySelector(className)
|
|
}
|
|
</script>
|
|
|
|
</html> |