63 lines
1.4 KiB
HTML
63 lines
1.4 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>搜索建议</title>
|
|
<style>
|
|
span {
|
|
color: red;
|
|
font-weight: 700;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<input type="text" placeholder="输入关键字">
|
|
<ul>
|
|
|
|
</ul>
|
|
</body>
|
|
<script>
|
|
|
|
var SearchList = [
|
|
'你好', '我不好', '今天天气不好', '明天吃什么', '你说什么', '你不想学习？'
|
|
];
|
|
|
|
var newList = []
|
|
|
|
$("input").oninput = function () {
|
|
newList = []
|
|
if ($("input").value.length != 0) {
|
|
SearchList.forEach(function (v) {
|
|
if (v.includes($("input").value)) {
|
|
let newText = v.replaceAll($("input").value, `<span>${$("input").value}</span>`)
|
|
newList.push(newText)
|
|
}
|
|
})
|
|
renderList()
|
|
} else {
|
|
$("ul").innerHTML = ""
|
|
}
|
|
|
|
}
|
|
|
|
function renderList() {
|
|
$("ul").innerHTML = ""
|
|
newList.forEach(function (item) {
|
|
$("ul").innerHTML += `<li>${item}</li>`
|
|
})
|
|
}
|
|
|
|
function $(className) {
|
|
return document.querySelector(className);
|
|
}
|
|
|
|
function _(className) {
|
|
return document.querySelectorAll(className);
|
|
}
|
|
</script>
|
|
|
|
</html> |