个人理解:动态创建script标签,利用src进行传值
实例:
//截取的淘宝数据,模仿百度搜索页面,可进行搜索
复制代码并运行可显示效果
<style>
*{padding: 0;margin: 0;}
ul{
list-style:none;
border:1px solid #ccc;
display:none;
padding-left:10px;
}
a{
text-decoration:none;
color:gray;
display:block;
width:400px;
height:30px;
text-align:left;
}
a:hover{
background:#add8e6;
}
.wrap{
width:400px;
height:auto;
margin:0px auto;
text-align:center;
margin-top:80px;
}
.wrap img{
width:270px;
height:130px;
}
.wrap input{
width:400px;
height:30px;
line-height:30px;
text-indent:1em;
outline:none;
border:none;
border:1px solid gray;
}
</style>
<div class="wrap">
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
<input type="text" id="txt">
<ul id="list">
<li><a href="##">爱奇艺</a></li>
<li><a href="##">爱土豆</a></li>
<li><a href="##">阿里巴巴</a></li>
</ul>
</div>
<script>
function getData(data){
var olist = document.getElementById("list");
var html = "";
for(var i=0;i<data.s.length;i++){
html += '<li><a href="https://ww.baidu.com/s?wd = '+data.s[i]+'">'+data.s[i]+'</a></li>';
}
olist.innerHTML = "";
olist.innerHTML = html;
}
var otxt = document.getElementById("txt");
otxt.onkeyup = function(){
var olist = document.getElementById("list");
olist.style.display = "block";
var oScript = document.createElement("script");
oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd = "+otxt.value+"&cb=getData";
document.body.appendChild(oScript);
}