<!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. C/C++代码覆盖率生成

    初始状态下只有一个源代码文件 nosoul@linux:testCov> ls test.c nosoul@linux:testCov> 第一步:编译.链接.执行可执行文件 gcc -o ...

  2. Huffman编码(测试源代码）

    1.此程序为c++程序 2.以下代码可实现手动输入,即去掉代码中的/*...*/注释符,并同时去掉赋值代码段 3.源代码 #include<iostream> using namespac ...

  3. Javascript 事件对象进阶（一）拖拽的原理

    拖拽原理 鼠标和Div的相对距离不变 三大事件 把拖拽加到document上 拖拽简单点来说就是不停的更改物体到页面左边&顶部的距离! 那么如何计算出物体到页面左端的距离呢? 当鼠标按下的时候 ...

  4. GDB调试基本命令

    一.列文件清单 list / l 列出产生执行文件的源代码的一部分 //列出 line1 到 line2 行之间的源代码 (gdb) list line1, line2 //输出从上次调用list命令 ...

  5. Quartz定时调度配置

    1.   CronTrigger时间格式配置说明 CronTrigger配置格式: 格式: [秒] [分] [小时] [日] [月] [周] [年] 序号 说明 是否必填 允许填写的值 允许的通配符 ...

  6. Apache commons-client authentication(授权)

    import org.apache.commons.httpclient.HttpClient; import org.apache.commons.httpclient.UsernamePasswo ...

  7. Android 学习第13课，android 实现发送短信的功能

    1. 界面布局 界面代码: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...

  8. jQuery元素查找方式

    jQuery常用的元素查找方法总结 $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到 ...

  9. js 打印星星金字塔

    /** * * 第一行: * * 第二行: *** * 第三行: ***** * 第四行: ******* * 第五行: ********* * */ document.write('<p al ...

  10. ajax处理的方式

    1.方式一:在一个web页面中 [System.Web.Services.WebMethod],有点象webservers的方法! 前台: 返回的数据: msg:Object {d: "He ...