jquery 百度搜索

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title></title>

 <style>

 *{ margin:; padding:; list-style:none;}

 #box{ width:645px; margin:10px auto; text-align:center; overflow:hidden; font-size:20px;}

 #box img{ width:270px; height:129px;}

 #t1{ width:540px; height:36px; line-height:36px; outline:none; text-indent:6px; font-size:20px;}

 .s_btn {

     outline:none;

     width: 100px;

     height: 40px;

     float:right;

     color: rgb(, , );

     font-size: 15px;

     letter-spacing: 1px;

     background: rgb(, , );

     border-bottom: 1px solid rgb(, , );

     -webkit-appearance: none;

     border:none;

     -webkit-border-radius: ;

     margin-left:1px;

     cursor:pointer;

 }

 #box ul{ width:542px; border:1px solid #ccc; border-top:none; text-align:left; text-indent:6px; display:none;}

 #box ul li{ height:30px; line-height:30px; cursor:default;}

 #box ul li.on{ background:#f0f0f0;}

 </style>

 <script src="jquery-1.7.2.js"></script>

 <script>

 $(function(){

     var oBox=$('#box');

     var oBtn=$('#btn1');

     var oTxt=$('#t1');

     var oUl=$('#ul1');

     var iNow=-;

     var oldValue='';

     var url='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su';

     oTxt.on('keyup',function(ev){

         if(ev.keyCode==||ev.keyCode==){

             return;

         }

         if(ev.keyCode==){

             window.open('https://www.baidu.com/s?wd='+oTxt.val(),'_self');

             oTxt.val('');

         }

         $.ajax({

             url:url,

             data:{

                 wd:oTxt.val()

             },

             dataType:'jsonp',

             jsonp:'cb',

             timeout:,

             success:function(json){

                 var arr=json.s;

                 if(arr.length){

                     oUl.css('display','block');

                 }else{

                     oUl.css('display','none');

                 }

                 oUl.html('');

                 $.each(arr,function(index){

                    var oLi=document.createElement('li');

                    $(oLi).html(arr[index]);

                    $(oLi).appendTo(oUl);

                     $(oLi).on('mouseover',function(){

                         $.each(oUl.children(),function(t){

                             oUl.children().eq(t).removeClass('on');

                         });

                         $(this).addClass('on');

                     });

                     $(oLi).on('mouseout',function(){

                         $.each(oUl.children(),function(t){

                             oUl.children().eq(t).removeClass('on');

                         });

                     });

                     $(oLi).on('click',function(){

                         window.open('https://www.baidu.com/s?wd='+$(this).html(),'_self');

                         oTxt.val('');

                     });

                 });

             },

             error:function(){

                 alert('网络异常，请重新输入');

             }

         });

         oldValue=oTxt.val();

     });

     oBtn.on('click',function(){

         window.open('https://www.baidu.com/s?wd='+oTxt.val(),'_self');

         oTxt.val('');

     });

     oTxt.on('keydown',function(ev){

         var aLi=$('li');

         switch(ev.keyCode){

             case :

                 iNow++;

                 if(iNow==aLi.length){iNow=-};

                 $.each(aLi,function(index){

                     aLi.eq(index).removeClass('on');

                 });

                 if(iNow==-){

                     oTxt.val(oldValue);

                 }else{

                     aLi.eq(iNow).addClass('on');

                     oTxt.val(aLi.eq(iNow).html());

                 }

             break;

             case :

                 iNow--;

                 if(iNow==-){iNow=aLi.length-};

                 $.each(aLi,function(index){

                     aLi.eq(index).removeClass('on');

                 });

                 if(iNow==-){

                     oTxt.val(oldValue);

                 }else{

                     aLi.eq(iNow).addClass('on');

                     oTxt.val(aLi.eq(iNow).html());

                 }

                 break;

           }

     });

 });

 </script>

 </head>

 <body>

 <div id="box">

     <img src="https://www.baidu.com/img/bd_logo1.png"><br>

     <input type="text" id="t1"><input type="submit" id="btn1" value="百度一下" class="bg s_btn">

     <ul id="ul1">

         <!--<li class="on"></li>-->

         <!--<li></li>-->

         <!--<li></li>-->

         <!--<li></li>-->

     </ul>

 </div>

 </body>

 </html>

jquery 百度搜索的更多相关文章

js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
jsonp模拟获取百度搜索相关词汇
随便写了个jsonp模拟百度搜索相关词汇的小demo,帮助新手理解jsonp的用法. <!DOCTYPE html><html lang="en">< ...
仿百度搜索（AJAX）
<h1>百度搜索</h1><div id="sousuo"> < ...
JavaScript实现模糊推荐的input框(类似百度搜索框)
如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...
教你编写百度搜索广告过滤的chrome插件
1 前言目前百度搜索列表首页里,广告5条正常内容是10条,而且广告都是前1到5条的位置,与正常内容的显示样式无异.对于我们这样有能力的开发者,其实可以简单的实现一个chrome插件,在百度搜索页面里 ...
jQuery实现搜索框插件+豆瓣音乐接口实现豆瓣搜索框
jQuery实现搜索框插件豆瓣音乐接口实现豆瓣搜索框豆瓣接口有时不稳定,网络请求会报400,不要惊慌.我主要是练习一下jQuery的JSONP和封装插件. <div class=" ...
Ruby用百度搜索爬虫
Ruby用百度搜索爬虫博主ruby学得断断续续,打算写一个有点用的小程序娱乐一下,打算用ruby通过百度通道爬取网络信息. 第三方库准备 mechanize:比较方便地处理网络请求,类似于Pytho ...
使用Tampermonkey(油猴) 插件，重新实现了，百度搜索热点过滤功能
昨天晚上,花了点时间学习了Chrome插件的制作方法,并书写了<Chrome 百度搜索热点过滤插件 - 开源软件>这一文章,简单地介绍自己实现的百度搜索热点过滤神器的原理和使用方式,并进行 ...
利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...

随机推荐

Burp Suite 常用功能 0x01 扫描后台
扫描后台: 代理→转到intruder 在链接后面添加变量,变量=后台地址t GET /§后台§ xt 注意: 配置完成点击菜单栏Intruder → start attack 开始扫描.
Android TextView设置多彩文字
在应用开发中时常会遇到需要在一段文字中插入几个不一样颜色文字的需求; 以前本人都是用多个TextView拼起来,不仅感觉很蠢,操作起来也蛮恶心; 直到接触到了SpannableStringBuilde ...
基于vue的新组件开发
前天完成了一个新组件的开发,做的过程也是各种遇到问题,彻底弄懂了slot,巩固了一些flex布局和jquery的知识,比起自己第一次做组件开发,现在已经是能够下手做,遇到问题解决问题,还算有进步. 但 ...
关于jQuery外部框架
(function(window, undefined) { var jQuery = ... ... window.jQuery = wind ...
世界超强完美DIY 电子奇才五年全手工制作CPU
世界超强完美DIY 电子奇才五年全手工制作CPU 2015-07-08 极客范 (点击上方公众号,可快速关注我们) 在如今越来越靠程序化.流水线作业来完成生产的制造业中,想找一件手工打造的产品,真是越 ...
使用ActionBar Tab
使用ActionBar Tab(地址) 本文实现将页面分为多个选项卡,并在每一个选项卡中显示一个ListView. 创建新Layout - ActionbarTab.axml, 并向页面中添加Fram ...
iOS Orientation bug
Every September means pain for iOS developers- you need to make sure your old apps/code run on the n ...
技海拾贝 - Android
1. 前台Service - 介绍: http://blog.csdn.net/think_soft/article/details/7299438 - 代码实例: http://blog.csdn ...
记录一些PHP7RCC1编译问题
1,php7rc1源码编译undefined symboles的问题自己计划将php7环境部署到cubieboard上,懒得去找别人预编译的版本,所以动手从源码编译,中间遇到了一个小问题,此处记录一 ...
Ajax+JQuery
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

jquery 百度搜索

jquery 百度搜索的更多相关文章

随机推荐

热门专题