63 lines
1.4 KiB
HTML
63 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<input type="text" placeholder="请输入搜索关键词">
|
|
<ul>
|
|
</ul>
|
|
|
|
</body>
|
|
|
|
<script>
|
|
var JianYi = ['html学习', '今天第一个学html', 'js编程入门', '实际案例学习js和html', '垃圾js', 'typescript学习'];
|
|
var UserInput = document.querySelector("input");
|
|
var Ul = document.querySelector("ul");
|
|
var NewArr = [];
|
|
UserInput.oninput = function () {
|
|
|
|
NewArr = []
|
|
if (UserInput.value.length != 0) {
|
|
JianYi.forEach(function (v) {
|
|
if (v.indexOf(UserInput.value) != -1) {
|
|
var startIndex = v.indexOf(UserInput.value);
|
|
var length = UserInput.value.length;
|
|
var str = `<span style="color: red;">${v.substr(startIndex,length)}</span>`;
|
|
NewArr.push(v.replace(UserInput.value, str))
|
|
console.log(NewArr);
|
|
}
|
|
});
|
|
|
|
if (NewArr.length == 0) {
|
|
Ul.innerHTML = "<li>没有搜索建议</li>"
|
|
} else {
|
|
Ul.innerHTML = ""
|
|
NewArr.forEach(function (v) {
|
|
Ul.innerHTML += `<li>${v}</li>`
|
|
})
|
|
|
|
var Li = document.querySelectorAll("ul li");
|
|
Li.forEach(function (v) {
|
|
v.onclick = function () {
|
|
UserInput.value = v.innerText;
|
|
Ul.innerHTML = ""
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
|
|
} else {
|
|
Ul.innerHTML = ""
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
</html> |