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,其中包括一个文本输入框和一个按钮--><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 ...
随机推荐
- 浅谈FTP 与 LFTP 的 nlist 和 mget 功能
最近因为业务需要,与第三方数据厂商做数据对接,接口方式协定为 FTP传输 ,说说我过程中的dan teng 经历. 开始准备用 lftp mirror 的方式镜像的方式同步数据,由于对方提供的日志文件 ...
- clip 属性剪裁绝对定位元素
如果left >= right或者bottom <= top,则元素会被完全裁掉而不可见,即“隐藏”.通过这种方式隐藏的元素是可以被屏幕阅读器等辅助设备识别的,从而提高了页面的可用性. I ...
- 万圣节的糖果(Halloween Sweets)
今天遇到codewars的一道题,这是链接,讲的是关于万圣节的一个题目,简单点说,就是9个包裹,一个天平,两次称的机会,怎么找出9个包裹中唯一一个较重的包裹. 像我这种年轻时候喜欢研究难题获得存在感的 ...
- HTML table、form表单标签的介绍
1. <table>标签 1.1说明: 在HTML 中定义表格布局. 1.2格式: <table> <caption></caption> <tr ...
- JAVA Web day01--- Android小白的第一天学习笔记
HTML 1.HTML的概述 1.1.HTML简介 l HTML(Hyper Text Markup Language):超文本标记语言. >标记就是标签 >HTML不是一种编程语言,而是 ...
- Chp11 11.7
<Java语言程序设计>P327 题目要求使用数组来模拟实现ArrayList的一些方法,并要求可以根据实际长度来实现数组自动增长,这里只贴出LikeArrayList.java 测试方法 ...
- Java JDBC使用方法
public class JDBC{public static void main(String[] args){//查询数据selectData();}//查询数据的方法private static ...
- SQL语句小总结
无论是面试过程中,还是未来工作中,SQL都是一定会考到和用到的.所以,在此对之前看过的一些SQL知识点进行一下总结和记录,算是起到一个笔记本的作用.没有深入学习过SQL的和对SQL印象不太深的朋友可以 ...
- .Net WebApi 实现OAuth2.0认证
现在多数公众平台提供的api都使用OAuth2.0认证模式,最近在搞Android方面的开发,身份认证和权限控制的各方面比较来说,使用OAuth认证的还是比较靠谱,OAuth2.0的协议可以参考htt ...
- html框架
1.框架的概念 框架:将一个浏览器窗口划分成若干个小窗口 2.框架集合框架页 框架集<frameset>:主要用来划分窗口的. 框架页<frame>:主要用来指定窗口默认显示的 ...