<!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. Ruby用百度搜索爬虫

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

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

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

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

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

  9. 原生js 定义分页控件,类似于百度搜索

    实现一个类似于百度搜索结果的分页样式,样式可以自定义,接近于原生,少部分Jquery . 1.实现效果截图(默认无任何样式)  2.主要程序代码 define(function (require, e ...

随机推荐

  1. Kotlin语法（基础）

    一.基础语法: 1. 定义包名: 包名应该在源文件的最开头,包名不必和文件夹路径一致:源文件可以放在任意位置. package my.demo 2. 定义函数: fun sum(a: Int , b: ...

  2. 【读书笔记】iOS网络-应用间通信

    一,URL方案 URL方案有3个主要用途:根据设备上其他应用的存在与否调整逻辑,切换到其他应用以及响应打开你的应用的其他应用.你还可以通过URL方案从某个站点或是在基于Web的认证流程结束是打开应用. ...

  3. css控制标题长度超出部分显示省略号

    width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...

  4. JSON in JavaScript Asp.net

    首先官方网站  http://www.json.org/js.html 下载 json2.js 到Github 中下载 https://github.com/douglascrockford/JSON ...

  5. 7 个顶级的 HTML5 Canvas 动画赏析

    HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...

  6. 微信网站设置右上角发送、分享的内容——.net版本

    一.首先了解本文要解决的问题: 公司前一段开发了移动网站,老板喜欢通过微信看,然后把看到的东西通过右上角的按钮分享出来,但老板发现分享出来的东西,没有指定的图片,没有描述:所以我就得老老实实干活了.. ...

  7. 使用dwr时动态生成table的一个小技巧

    这篇随笔是我在07年写的,因为当时用了自己建设的blog,后来停止使用了,今天看到备份数据库还在,恢复出来放到这里.留着记录用. 我在使用DWR时,试了很多次都无法在动态生成的table中的一个或多个 ...

  8. 命令行向php传入参数的两种方法

    ##$argv or $argc  $argv 包含当运行于命令行下时传递给当前脚本的参数的数组.  $argv[0]  就是脚本文件名. $argc 包含当运行于命令行下时传递给当前脚本的参数的数目 ...

  9. 009.CentOS 6.7安装运行netmap

    一.netmap简介: 1.netmap是一个高性能收发原始数据包的框架,由Luigi Rizzo等人开发完成,其包含了内核模块以及用户态库函数.其目标是,不修改现有操作系统软件以及不需要特殊硬件支持 ...

  10. 【JAVA 小结】Java关于类与对象的代码

    分别建立2个类class works 和 Person import java.io.*; public class works { public static void main(String[] ...