52 lines
1.4 KiB
HTML
52 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>
|
|
</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);
|
|
result.forEach(function (v,i){
|
|
html +=`<li>${v}</>`
|
|
})
|
|
ul.innerHTML =html
|
|
}
|
|
|
|
|
|
</script>
|
|
</html> |