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

随机推荐

sass基础编写流程
这是之前整理在word上的基础流程 sass是Ruby语言开发的一个用于动态编程css文件的框架所以sass的运行依赖Ruby环境所以要先安装Ruby 参见详细教程(安装参照慕课网有详细的教程) ...
codeforces 651C（map、去重）
题目链接:http://codeforces.com/contest/651/problem/C 思路:结果就是计算同一横坐标.纵坐标上有多少点,再减去可能重复的数量(用map,pair存一下就OK了 ...
php正则，删除字符串中的中英文标点符号
原理很简单,正则查找字符串,然后替换英文标点符号,正则中有专用的模式来匹配.中文则需要一一列举代码: <?php $str = "!@#$%^&*(中'文::﹑•中'文中' ...
Ruby学习笔记0708
#!/usr/bin/env ruby class MegaGreeter attr_accessor :names # 初始化這個物件 def initialize(names = "Wo ...
NSUserDefaults
一.了解NSUserDefaults以及它可以直接存储的类型二.使用 NSUserDefaults 存储自定义对象1.将自定义类型转换为NSData类型2.将自定义类型数据存入 NSUserDefau ...
MyBaits使用小结
Mybatis用like进行模糊查询的时候,配置与所用的数据库有关系,总结了下,具体如下: 1.MySQL :LIKE CONCAT('%',#{empname},'%' ) 或者 LIKE CO ...
jQuery基本语法
jQuery 是 JavaScript 的一个函数库.方便.主流 jQuery的开发步骤: (1) 导入jQuery 库 (2) 在 <script src="../js/j ...
jsp和servlet中文乱码
jsp和servlet之间出现中文乱码的集中原因和解决方法详解:http://blog.csdn.net/longyuhome/article/details/7856270
web安全之sqlload_file()和into outfile（）
load_file() 条件:要有file_priv权限知道文件的绝对路径能使用union 对web目录有读权限如果过滤啦单引号,则可以将函数中的字符进行hex编码步骤: 1.读/etc/in ...
IOS懒加载
1.懒加载基本懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了,如果没有那么再去进行实例化 ...

jquery 百度搜索

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

随机推荐

热门专题