41 lines
1.2 KiB
HTML
41 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>搜索</title>
|
|
</head>
|
|
|
|
<body>
|
|
<input type="text" placeholder="输入关键字">
|
|
<ul></ul>
|
|
</body>
|
|
<script>
|
|
var JyList = ['天天学习', '努力学习', '天天蹦迪', '天天吃屎', '努力向上'];
|
|
var ul = document.querySelector("ul")
|
|
var input = document.querySelector("input");
|
|
input.oninput = function () {
|
|
// console.log(input)
|
|
if (input.value.trim().length > 0) {
|
|
var newList = [];
|
|
JyList.forEach(function (v, i) {
|
|
if (v.indexOf(input.value) > -1) {
|
|
var start = v.indexOf(input.value);
|
|
var length = input.value.length;
|
|
var newStr = `<span style="color:red">${v.substr(start, length)}</span>`;
|
|
newList.push(v.replace(input.value, newStr))
|
|
}
|
|
});
|
|
ul.innerHTML = ""
|
|
newList.forEach(function (v) {
|
|
ul.innerHTML += `<li>${v}</li>`
|
|
})
|
|
} else {
|
|
ul.innerHTML = ""
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</html> |