63 lines
1.7 KiB
HTML
63 lines
1.7 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>
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<input type="text" placeholder="请输入搜索关键字">
|
|
<ul>
|
|
|
|
</ul>
|
|
</body>
|
|
<script>
|
|
|
|
// 1 给输入框绑定 oninput 输入事件，实时获取输入的数值
|
|
// 2 拿到用户输入的 关键字，去搜索建议的数组中，找到包含这个关键字的数据
|
|
// 3 拿到匹配的数据后，需要保存到 新的数组 中
|
|
// 4 渲染 新数组 ，显示到 ul 中
|
|
|
|
// 5 实现 匹配的 关键词 加红色突出显示
|
|
|
|
// 天气
|
|
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>
|