<!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 百度搜索的更多相关文章

  1. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  2. jsonp模拟获取百度搜索相关词汇

    随便写了个jsonp模拟百度搜索相关词汇的小demo,帮助新手理解jsonp的用法. <!DOCTYPE html><html lang="en">< ...

  3. 仿百度搜索（AJAX）

    <h1>百度搜索</h1><!--建立一个DIV,其中包括一个文本输入框和一个按钮--><div id="sousuo"> < ...

  4. JavaScript实现模糊推荐的input框(类似百度搜索框)

    如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

  5. 教你编写百度搜索广告过滤的chrome插件

    1 前言 目前百度搜索列表首页里,广告5条正常内容是10条,而且广告都是前1到5条的位置,与正常内容的显示样式无异.对于我们这样有能力的开发者,其实可以简单的实现一个chrome插件,在百度搜索页面里 ...

  6. jQuery实现搜索框插件+豆瓣音乐接口实现豆瓣搜索框

    jQuery实现搜索框插件 豆瓣音乐接口实现豆瓣搜索框 豆瓣接口有时不稳定,网络请求会报400,不要惊慌.我主要是练习一下jQuery的JSONP和封装插件. <div class=" ...

  7. Ruby用百度搜索爬虫

    Ruby用百度搜索爬虫 博主ruby学得断断续续,打算写一个有点用的小程序娱乐一下,打算用ruby通过百度通道爬取网络信息. 第三方库准备 mechanize:比较方便地处理网络请求,类似于Pytho ...

  8. 使用Tampermonkey(油猴) 插件，重新实现了，百度搜索热点过滤功能

    昨天晚上,花了点时间学习了Chrome插件的制作方法,并书写了<Chrome 百度搜索热点过滤插件 - 开源软件>这一文章,简单地介绍自己实现的百度搜索热点过滤神器的原理和使用方式,并进行 ...

  9. 利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）

    实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...

随机推荐

  1. POJ 3041 -- 二分图匹配

    题意:有个N*N的网格,有一部分格子里有陨石,小明有很牛逼的武器,打一枪后一行或一列的陨石就没了,给出陨石分布,求最小打炮数. 分析:其实就是Konig定理.记最小打炮数为m,在网格里你最多可以找出M ...

  2. C#使用QQ邮箱发送邮件

    首先要开通QQ邮箱的STMP服务.QQ邮箱——设置——账户——开启SMTP服务. 需要引用: using System.Net; using System.Net.Mail; using System ...

  3. 使用SqlLocalDB命令行管理LocalDB

    SqlLocalDB.exe start v11.0 SqlLocalDB.exe info v11.0 SQL Server Management Stdio添加管道连接实例 默认实例名(local ...

  4. 一次完整的自动化登录测试-基于python+selenium进行cnblog的自动化登录测试

    Web登录测试是很常见的测试!手动测试大家再熟悉不过了,那如何进行自动化登录测试呢!本文作者就用python+selenium结合unittest单元测试框架来进行一次简单但比较完整的cnblog自动 ...

  5. 问题：https与http有什么区别啊？

    HTTPS(Secure Hypertext Transfer Protocol)安全超文本传输协议  它是一个安全通信通道,它基于HTTP开发,用于在客户计算机和服务器之间交换信息.它使用安全套接字 ...

  6. tomcat端口号被占用或者修改端口号的解决方法

    一)修改端口号: 在tomcat文件中找到conf里面的server.xml 在tomcat解压后的文件中按照下图操作

  7. win10 mysql 5.7.13 服务无法启动 3534

    自己也百度了很多方法都不管用(我用的MySQL是免安装版,直接解压缩的那种) 基本上都是说没有设置data目录,没有 初始化,我很郁闷的是都按照那些步骤处理了,到最后还是不行. 后来把配置文件里面的 ...

  8. toUnsignedString详解

    /** * All possible chars for representing a number as a String */ final static char[] digits = { '0' ...

  9. [AHOI 2009] 维护序列（线段树模板题）

    1798: [Ahoi2009]Seq 维护序列seq Time Limit: 30 Sec  Memory Limit: 64 MB Description 老师交给小可可一个维护数列的任务,现在小 ...

  10. c++句柄设计

    句柄,也称为智能指针. 我计算了一下我的时间,以后每14天得读完一本书,才不愧对我买的这么多书.然而我还要抽出时间来谢谢博文.最近读的是c++沉思录,开篇就用了3章来讲述句柄.好了,废话少说,接下来谈 ...