javascript防淘宝搜索自动提示代码

效果：


淘宝搜索内容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>
时间： 2024-08-31 17:04:32

javascript防淘宝搜索自动提示代码的相关文章

基于jQuery仿淘宝产品图片放大镜代码分享_jquery

这篇文章主要介绍了jQuery淘宝产品图片放大镜特效,鼠标点击图片,图片放大,特别适合图片细节展示,感兴趣的小伙伴可以参考下.(1)html代码: <div class="box"> <div class="tb-booth tb-pic tb-s310"> <a href="images/01.jpg"> <img src="images/01_mid.jpg" alt="

淘宝suggest 的提示词是如何得出的？

问题描述 请问淘宝suggest这些提示词是如何得出的? 问题补充:soartju 写道 解决方案 看你的业务需要了,淘宝的我不清楚具体实现.我可以给些建议:)如果是搜索引擎,可以记录用户输入习惯信息,然后记录到数据库中,作为备选.如果是淘宝,由于主要搜索商品名称,因此可以把商户注册的商品名记录到数据库,与用户输入匹配.当然也可以混合使用:商品名称+用户输入习惯,看具体业务需求了解决方案二:你是说类似google或百度输入时候的提示吗?通过ajax实现的.在页面上捕获用户的输入信息,然后将此信息

Javascript模仿淘宝信用评价实例(附源码)_javascript技巧

本文实例讲述了Javascript模仿淘宝信用评价实现方法.分享给大家供大家参考,具体如下: 老板昨天开会说:要给公司的购物平台增加信用评价功能,用户体验参考淘宝. 于是今天研究了一下,用jQuery模似一个类似的效果: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&

JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析_javascript技巧

淘宝图片处理讨论淘宝网页面很大,但是打开速度很快.其对图片处理是运用了滚动加载,就是滚动轴滚到哪里,图片在哪里加载.但是你想查看他的源代码,那要费九牛二虎之力吧,因为他们代码压缩合并做的很好!因为图片是滚动加载的,初始化的时候图片不加载,那么当你在页面底部刷新页面的时候,底部的页面通常不会加载出来,淘宝网的做法貌似是(因为我没有看他们的源代码,只是凭操作),刷新让页面回到顶部. 模仿淘宝,做滚动图片加载 这里想到了三种方法:1.javascript懒加载之可视区域加载 <!DOCTYPE htm

javascript实现淘宝幻灯片广告展示效果_javascript技巧

本文实例讲述了javascript实现淘宝幻灯片广告展示效果的方法.分享给大家供大家参考.具体如下: 一.效果图如下: 二.代码部分: JS代码部分: function getClass(oParent,name){ var arr=[]; var oBj=oParent.getElementsByTagName("*"); for(var i=0;i<oBj.length;i++){ if(oBj[i].className==name){ arr.push(oBj[i]); }

javascript实现淘宝幻灯片广告展示效果

  本文实例讲述了javascript实现淘宝幻灯片广告展示效果的方法.分享给大家供大家参考.具体如下: 一.效果图如下: 二.代码部分: JS代码部分: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 function getClass(oParent,name){ var a

淘宝搜索的标签

说起SEO,人们应该不陌生的,百度会出来一大堆,谷歌也会出来一大推,关于那些传得神乎其神的优化手段,我实在不敢多说什么,不管你信还是不信,反正我是一直质疑着,当然有很多都是可信的,毕竟也是比较肤浅的.你又不是里面的核心工程师,你怎么能知道他们在对搜索引擎做些什么算法呢,除非你够资质,乐意于当一个算法狂. 既然没办法摸透它的算法,那讨论seo是不是没有用呢?当然不是,就好比我们经常使用的电脑一样,很多人也许并不知道电脑的工作原理,但电脑对于我们来说,却真的有用,因为我们都在用,那么搜索引擎做出来也

淘宝SEO：影响淘宝搜索排名因素大盘点

中介交易 SEO诊断 淘宝客 云主机 技术大厅 这个是我一年前做的一个笔记,当时我们一起讨论罗列出来的几十条,感觉很有用,然后一直到现在也是看到的或者突然想到的一直在不停地往里面补充,没事经常翻翻,最近淘宝改版,改规则,大家也都在一直不停地研究,现在分享出来,希望对大家有所帮助. 据淘宝说影响排名的因素有200-300条,没有一一考究,以下罗列出来的都是一些感觉很重要的因素然后进行了同类整理,当然还有一些小的无关紧要的没有研究价值就不浪费时间写了.下文重要性与先后顺序无关,也欢迎朋友们补充. 1

Android仿百度谷歌搜索自动提示框AutoCompleteTextView简单应用示例_Android

本文实例讲述了Android仿百度谷歌搜索自动提示框AutoCompleteTextView简单应用.分享给大家供大家参考,具体如下: 现在我们上网几乎都会用百度或者谷歌搜索信息,当我们在输入框里输入一两个字后,就会自动提示我们想要的信息,这种效果在Android 里是如何实现的呢? 事实上,Android 的AutoCompleteTextView Widget ,只要搭配ArrayAdapter 就能设计同类似Google 搜索提示的效果. 本例子先在Layout 当中布局一个AutoCom