javascript防淘宝搜索自动提示代码
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 本文章来给各位同学介绍一款javascript防淘宝搜索自动提示代码，这个百度,google都有这功能哦，下面小编来给大家介绍一下淘宝网的一个实现实例。...
|
效果：
![淘宝搜索内容<a href=]() javascript实现" src="http://filesimg.111cn.net/2013/11/16/2013111607430198.jpg" width="300" height="292" />
淘宝搜索内容javascript实现
| 代码如下 |
复制代码 |
|
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body ,input,ul,h2 {margin:0;padding:0;}
li {list-style:none;}
div[id='search'] {margin:77px auto;width:400px;}
input[type='submit'] { width:50px; height:34px;}
input[type='text'] { border:1px solid #666; width:300px ;height:30px; }
#search ul:nth-of-type(1){border:1px solid #666; width:300px; border-top:0; overflow:hidden; display:none;}
#search ul li:nth-of-type(n) {height:30px; width:300px; line-height:30px; float:left;}
#search ul li:hover{background:#06F;color:#fff;}
#search li strong:nth-of-type(n){color:#000; font: 18px "微软雅黑" bold; float:left;}
#search li span:nth-of-type(1) { float:right; color:#ccc;padding-right:10px;}
</style>
</head>
<body>
<div id="search">
<input type="text" /><input type="submit"value="搜索" />
<ul>
<!--<li>
<strong>鸟叔国国?地</strong>
<span>24324324</span>
</li>-->
</ul>
</div>
</body>
</html>
<script>
function tao(date) {
var ress=date.result;
var oSear=document.getElementById('search');
var oTxt=document.getElementsByTagName('input')[0];
var oBtn=document.getElementsByTagName('input')[1];
var oUl=oSear.getElementsByTagName('ul')[0];
if(ress.length) {
oUl.style.display='block';
oUl.innerHTML='';
for(var i=0;i<ress.length;i++) {
var oLi=document.createElement('li');
oLi.innerHTML='<strong>'+ress[i][0]+'</strong><span>约'+ress[i][1] +'宝贝</span>';
oLi.url='http://s.taobao.com/search?q='+ress[i][0]; //跳转址到淘宝上查询
oUl.appendChild(oLi);
oLi.onclick=function(){
This=this.url
window.open(this.url,'_blank')
}
oBtn.onclick=function() { //点搜索
window.open('http://s.taobao.com/search?q='+oTxt.value,'_blank')
}
}
}
}
window.onload=function() {
var oSear=document.getElementById('search');
var oTxt=document.getElementsByTagName('input')[0];
var oUl=oSear.getElementsByTagName('ul')[0];
oTxt.onkeyup=function() {
if(oTxt.value=='') { //搜索的文字删除成空时隐藏oUl
oUl.style.display='none';
}
if(oTxt.value!='') {
var oScript=document.createElement('script');
oScript.src='http://suggest.taobao.com/sug?code=utf-8&q='+this.value+'&_ksTS=1371557212328_622&callback=tao';
//这里数据地址调用
oScript.type='text/javascript';
document.body.appendChild(oScript);
document.onclick=function(){
oUl.style.display='none';
}
}
}
}
</script>
|
|
