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 ...

随机推荐

关于JAVA学习计划和感想
学习计划第一阶段: JAVA语言基础知识.包括异常.IO流.多线程.集合类. 要求:异常------掌握try-catch-finally的使用 IO流------掌握字 ...
html中meta的介绍
前言 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用 ...
Discuz 7.0版块横排显示版块图标和版块简介的方法
Discuz 7.0版块横排显示版块图标和版块简介的方法最近很多朋友咨询Discuz论坛设置论坛版块横排后,如何设置显示版块图标和简介的问题. 一.显示板块图标找到templates\defaul ...
android操作线程各种方法解析
(一)刚开始学习android的时候我是这么写的 new Thread( new Runnable() { public void run() { myView.invalidate(); } }). ...
B - I Hate It
#include<cstdio> #include<string.h> using namespace std; int ans; ; ]; struct Node{ int ...
hibernate一级缓存
理解 Hibernate 一级缓存 Hibernate 一级缓存默认是打开,不需要任何的配置.实际上,你无法强制禁止它的使用. 如果你理解了一级缓存实际上和会话是关联的,就很容易理解一级缓存.总所周知 ...
ion-scroll 滚动框
ion-scroll 声明一个可滚动的容器,需指定滚动区域和内容的大小 <ion-scroll>需要滚动的内容</ion-scroll> ion-scroll 有两个常用的可选 ...
mySql中IFNULL的使用说明
IFNULL(expr1,expr2) 如果expr1不是NULL,IFNULL()返回expr1,否则它返回expr2.IFNULL()返回一个数字或字符串值具体用法如:现有学生表(tbl_stu ...
ajax 选项卡
Ajax其实就是交互式网页应用开发技术包括以下几个方面: 1.XHTML和CSS 2.使用DOM作为动态显示和交互 3.使用XML和XSLT 做数据交互和操作 (这些完全不太懂) 4.使用XMLHtt ...
Postfix邮件服务器搭建及配置
一.邮件服务器(Mail Server)的传输协议 1.简单邮件传输协议(SMTP):Simple Mail Transger Protocol 2.扩展的简单邮件传输协议(ESMTP):Extend ...

jquery 百度搜索

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

随机推荐

热门专题