64 lines
1.5 KiB
HTML
64 lines
1.5 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 result = [];
|
|
|
|
var list = [
|
|
'明天天气不好', '天气很好', '我的心情很好', '我不想学编程', '编程是我快乐',
|
|
'明天我想学习', '明天我们出去玩'
|
|
];
|
|
|
|
var mes = document.querySelector("input"),
|
|
ul = document.querySelector("ul");
|
|
|
|
mes.oninput = function () {
|
|
result = []
|
|
if (mes.value.length != 0) {
|
|
for (var i = 0; i < list.length; i++) {
|
|
if (list[i].includes(mes.value)) {
|
|
var spanText = `<span style="color:red">${mes.value}</span>`
|
|
var pushText = list[i].replace(mes.value, spanText)
|
|
result.push(pushText)
|
|
}
|
|
}
|
|
renderHTML()
|
|
} else {
|
|
ul.innerHTML = ""
|
|
}
|
|
}
|
|
|
|
|
|
function renderHTML() {
|
|
var html = ""
|
|
console.log(result); // 明天
|
|
// Array.prototype.forEach = function(callback) {
|
|
// for(var i = 0; i < this.length; i++) {
|
|
// callback(this[i], i, this)
|
|
// }
|
|
// }
|
|
result.forEach(function (v, i) {
|
|
html += `<li>${v}</li>`
|
|
})
|
|
|
|
ul.innerHTML = html
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</html> |