<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#box {
width: 300px;
margin: 100px auto;
position: relative;
}
#search {
height: 50px;
width: 100%;
box-sizing: border-box;
text-indent: 1em;
}
#list {
position: absolute;
top: 50px;
width: 100%
}
#list li {
line-height: 40px;
background: #dedede;
margin: 1px 0;
padding: 0 10px;
}
#list span {
color: red;
font-size: larger;
}
</style>
</head>
<body>
<div id="box">
<input type="text" id="search">
<ul id="list"></ul>
</div>
</body>
<!-- https://category.vip.com/ajax/getSuggest.php?callback=callback&keyword=" + this.value -->
<script>
// 第二步 定义好要被调用的 函数
function callback(res) {
var data = res.data;
// console.log(data)
var str = '';
for (var i = 0; i < data.length; i++) {
// 突出关键字
var newStr = data[i].word.replace(search.value, `<span>${search.value}</span>`)
str += `
<li>
<a href=http:${data[i].url}>${newStr} </a>
</li>
`
}
list.innerHTML = str
// /lyric?id=33894312
}
var search = document.querySelector("#search");
var list = document.querySelector("#list");
search.oninput = function () {
//第一步 创建一个 新的script节点 并传递参数
var node = document.createElement("script");
// this指向 search
node.src = `https://category.vip.com/ajax/getSuggest.php?callback=callback&keyword=${this.value}`;
document.body.appendChild(node);
}
</script>
</html>