<style>
*{
margin: 0;
padding: 0;
}
form{
position: relative;
}
.text{
width:300px;
border: 1px solid #FFCC00;
line-height: 40px;
outline:none;
}
.sub{
width: 50px;
line-height: 40px;
background:#FFCC00 ;
/*border: none;*/
position: absolute;
top: 0;
left:302px;
border: 1px solid #FFCC00;
outline:none;
}
ul{
list-style: none;
}
#list{
width: 300px;
border: 1px solid #FFCC00;
border-top: none;
position: absolute;
top: 42;
left: 0;
}
#list span{
color: #666666;
font-size: 14px;
}
li a{
text-decoration: none;
color: #000000;
}
</style>
</head>
<body>
<form action="javascript:;" method="post" name="form">
<input type="text" name="ttt" class="text"/>
<input type="submit" value="搜索" class="sub"/>
</form>
<ul id="list">
<!--<li><span>3件</span></li>-->
</ul>
</body>
<script>
var form=document.forms['form'];
var ttt=form.elements['ttt'];
var list=document.querySelector('#list');
function callback(data){
data.result.forEach((v)=>{
console.log(v);
var newli=document.createElement('li');
newli.innerHTML='<span>'+v[0]+'</span>';
list.appendChild(newli);
})
};
ttt.oninput= function(){
list.style.display='block';
// console.log(this.value);
var script=document.createElement('script');
script.src='https://suggest.taobao.com/sug?code=utf-8&q='+this.value+'&_ksTS=1524732732633_992&callback=callback&k=1&area=c2c&bucketid=5';
document.body.appendChild(script);
};
ttt.onblur=function(){
list.style.display='none';
ttt.value='';
}
</script>