web搜索框的制作（必应）
搜索框中我们输入一些字或者字母，为何下面就会有一些自动补齐的相关搜索，比如我在搜索输入框中输入一个字母e，下面就会出现饿了么，e租宝，ems等相关的搜索链接。然后经过百度，发现原来很多厂商的服务器早已经为我们弄好了。
我们只需要写个输入框，然后获取输入框里的信息，将信息打包，请求服务器，然后获取数据再显示在界面上就OK了。想想是不是很简单呢，因为我们不需要做很多相关的算法和处理因为服务器早已经做好了，我们做的只是记住调用的方法，然后调用就行了。
然后我找到了的bing必应，微软旗下的搜索引擎，试着做了一个。
效果如下：
看了效果图大家可能会问了，为什么网址是api.bing.com这个类似cn.bing.com(必应的网址)，这个就涉及到跨域了，因为JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象，相关信息大家可以百度，这里就不详细阐述了，我只说一点，跨域问题只存在于你的JS代码中，服务器是没有跨域问题的
然后我这里使用的是Fiddler来解决跨域问题，我的理解是它可以帮助你把你本地的文件映射到其它域名下，这样你的JS代码就可以访问这个域名下的JS对象了，当然这只是在欺骗你本地的JS代码，让你的JS代码误以为你们是一个域名下的，然后可以去访问，服务器那边并不会产生什么影响。这个只是我本人的看法，有表述不正确的地方还望大家指出，谢谢大家。
说了这么多，大家应该也有一个对搜索框制作的模糊印象了吧，下面是具体代码：
bing_search_index.html:
需要引入jquery库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 兼容IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>bing search</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="bg-div">
<div class="search-box">
<div class="logo"></div>
<form id="search-form">
<input type="text" class="search-input-text" id="search-input" name="q" />
<input type="submit" class="search-input-button" value=""/>
</form>
</div>
</div>
<div class="suggest" id="search-suggest" style="display:none;">
<ul id="search-result">
<li>搜索结果1</li>
<li>搜索结果2</li>
<li></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery1-11-1.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
$(document).ready(function(){
$('#search-input').bind('keyup', function() {
var jqueryInput = $(this);
//用户输入
var searchText = jqueryInput.val();
//请求必应的服务器，获得相关搜索信息
$.get('http://api.bing.com/qsonhs.aspx?q=' + searchText,function(json){
//服务器返回的信息
var data = json.AS.Results[0].Suggests;
var html="";
//将服务器返回的信息加到li标签里
for(var i = 0; i < data.length; i++){
html += '<li>' + data[i].Txt + '</li>';
}
$('#search-result').html(html);
$('#search-suggest').show().css({
top: $('#search-form').offset().top+$('#search-form').height()+10,
left: $('#search-form').offset().left,
// $('#search-form').offset().left的结果是468.5
// 不知道为什么left不加4只有464.25的宽度
position: 'absolute'
});
},'json');
});
$(document).bind('click',function(event) {
// 隐藏搜索结果
$('#search-suggest').hide();
});
$(document).delegate('li', 'click', function(event) {
var li_text = $(this).text();//取到li里的文本
//返回结果的链接
location.href = 'http://cn.bing.com/search?q=' + li_text;
});
});
js/script.js:
*{
margin: 0;
padding: 0;
}
body{
background-color: #333;
}
.bg-div{
/*bing的背景图*/
background-image: url(images/bg.jpg);
width: 1325px;
height: 630px;
margin: 0 auto;
}
.logo{
/*bing的logo*/
background-image: url(images/logo.png);
width:107px;
height: 53px;
float: left;
}
form{
float: left;
background-color: #fff;
padding: 5px;
margin-left: 20px;
}
.search-input-text{
/*消除input的边框*/
border: 0;
width: 400px;
height: 36px;
line-height: 36px;
float: left;
/*去掉文本框点击后显示的高亮效果*/
outline: none;
}
.search-input-button{
border: 0;
/*bing的搜索按钮图*/
background-image: url(images/search.png);
width: 36px;
height: 36px;
float: left;
cursor: pointer;
}
.search-box{
position: absolute;
top: 30%;
left: 25%;
}
.suggest{
width: 446px;
background-color: #fff;
border: 1px solid #999;
}
.suggest ul{
list-style: none;
margin: 0;
padding: 0;
}
.suggest ul li{
padding: 3px;
font-size: 14px;
line-height: 25px;
cursor: pointer;
list-style: none;
}
.suggest ul li:hover{
text-decoration: underline;
background-color: #e5e5e5;
}
对Fiddler不熟悉的可以看看这里：
1.打开fiddler,然后请求http://api.bing.com/bing_search_index.html
2.在fiddler里找到那个请求
3.再在右边对其添加规则
web搜索框的制作（必应）的更多相关文章
- bootstrap制作搜索框及添加回车搜索事件
下面是开发中用bootstrap制作的一个搜索框,以及给搜索框添加回车搜索事件的一个小案例. bootstrap制作搜索框及添加回车搜索事件 下面是功能实现的代码: <!DOCTYPE html ...
- 三、jQuery--jQuery实践--搜索框制作
input标签讲解 <input/>作为按钮的type属性:button.submit(后面会有二者对比分析)
- Xamarin.Android 制作搜索框
前段时间仿QQ做了一个搜索框样式,个人认为还不错,留在这里给大家做个参考,希望能帮助到有需要的人. 首先上截图(图1:项目中的样式,图2:demo样式): 不多说直接上代码: Main.axml &l ...
- 用jsonp实现搜索框功能
用jsonp实现搜索框功能 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面 ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- 20款风格独特的搜索框 PSD 设计素材免费下载
搜索框是网站中的最常用的组件一直,但有时候,搜索框因为设计不够新颖容易被访客忽视.通过提高一个搜索框的外观设计,最终对整体的网页设计带来好的变化.这份列表将是一个很好的资源,尤其是对设计师.希望你会喜 ...
- 25款创新的 PSD 格式搜索框设计素材【免费下载】
这一次,我们给大家带来的素材是25款很有吸引力的搜索框 PSD 设计,你可以免费下载使用.有时候,搜索框容易被访客忽视,因为其简单和没有吸引力的设计.如果这是你所面对的问题,那么我们会鼓励你去看看在这 ...
- 【转】如何建立一个样式新颖的CSS3搜索框
在线演示 搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它.无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框? 在今天的文章 ...
- ArcGIS Portal 10.4 本地坐标系的web 3d地形展示制作说明
原文:ArcGIS Portal 10.4 本地坐标系的web 3d地形展示制作说明 ArcGIS Portal 10.4 本地坐标系的web 3d地形展示制作说明 By 李远祥 ArcGIS Por ...
随机推荐
- 如果在docker中部署tomcat,并且部署java应用程序
1.先说如何在docker中部署tomcat 第一步:root用户登录在系统根目录下创建文件夹tomcat7,命令如:mkdir tomcat7,并且切换到该目录下:cd tomcat7: 第二步:创 ...
- odoo 字段组件
每个字段类型都会使用相应的默认组件在表单中显示.但还有一些替代组件可以使用.对于文本字段,有如下组件: email用于让 email 文本成为可操作的”mail-to”地址 url用于将文本格式化为可 ...
- 第五章·Logstash深入-日志收集
1.Logstash收集单个日志到文件中 file模块收集日志 不难理解,我们的日志通常都是在日志文件中存储的,所以,当我们在使用INPUT插件时,收集日志,需要使用file模块,从文件中读取日志的内 ...
- Kubernetes介绍与核心组件
Kubernetes是什么? Kubernetes是容器集群管理系统,是一个开源的平台,可以实现容器集群的自动化部署.自动扩缩容.维护等功能. Kubernetes 特点 可移植: 支持公有云,私有云 ...
- 使用Task的Wait和Result时注意
如果计算限制的任务抛出未处理的异常,该异常会被“吞噬”并存储到一个集合中,而线程池线程可以返回到线程池中.调用Wait方法或者Result属性时,这些成员会抛出一个System.AggregateEx ...
- 浅入深出Vue：文章编辑
登录与注册功能都已经实现,现在是时候来开发文章编辑功能了. 这里咱们就使用 markdown 作为编辑语言吧,简洁通用.那么我们就需要找一下 markdown 的编辑器组件了,而且还要支持 vue噢. ...
- 微服务框架SpringCloud与Dubbo
#v1.0.0# 1.背景 Dubbo,是阿里巴巴服务化治理的核心框架,并被广泛应用于阿里巴巴集团的各成员站点.阿里巴巴近几年对开源社区的贡献不论在国内还是国外都是引人注目的,比如:JStorm捐赠给 ...
- 网卡绑定(bonding)
就是将多块网卡绑定同一IP地址对外提供服务,可以实现高 可用或者负载均衡.当然,直接给两块网卡设置同一IP地址 是不可能的.通过bonding,虚拟一块网卡对外提供连接, 物理网卡的被修改为相同的MA ...
- Java-Dom4jHelper工具类
import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileInputStream; import ja ...
- uoj30【CF Round #278】Tourists(圆方树+树链剖分+可删除堆)
- 学习了一波圆方树 学习了一波点分治 学习了一波可删除堆(巧用 ? STL) 传送门: Icefox_zhx 注意看代码看怎么构建圆方树的. tips:tips:tips:圆方树内存记得开两倍 CO ...