bing智能提示搜索框实现

1、将一张大图铺满窗口~实现方式：

.bg-div-class {
    background-image: url("../images/river.jpg");
    position: fixed;
    width: 100%;
    height: 100%;
}

*有时~可能需要设置z-index为一个较大的值

 

2、为了实现智能提示的功能~这里使用ajax通过异步方式从服务器上获取提示词条~并通过js动态地添加到页面中~因为ajax涉及到同源限制~需要将自己的页面部署到http://api.bing.com/域名下~这里采用fiddler做了一个简单的环境的搭建~具体介绍如下：

 

使用fiddler可以实现，该软件就相当于1个代理，可以对用户的请求和服务器的响应进行修改。我们知道如果我们请求一个服务器上不存在的文件一般是跳转到一个404页面，但是利用该工具就可以实现修改服务器响应的结果，呈现给用户一个自定义的文件——我们只需要拦截服务器的响应并替换成我们自己的页面即可。

由于Fiddler是基于代理的工作原理，所以打开Fiddler后IE的代理就被修改成了127.0.0.1:8888，可以直接使用，其他浏览器Chrome或者是Firefox可能需要更改网络代理，以Firefox为例。找到设置-->高级-->网络-->代理配置即可，如下图：

 

 

 

接下来我们请求一个地址http://api.bing.com/bing_search.html，由于bing_search.html在服务器压根不存在所以会报出404错误，在Fiddler中我们捕获到了这个响应：

 

 刷新浏览器，就可以发现我们请求的页面不再是404错误了。

由于我是将样式和js单独写在另一个文件中，所以还是有404错误，接下来按照同样的方法替换成我们本地的资源：

然后在刷新页面~看看是不是成功啦~~

这里注意一下~前面提到的http://api.bing.com/bing_search.html~这里bing_search.html是随便你写的~你要是喜欢也可以写成http://api.bing.com/a.html~只是最后你要访问的页面地址就变为http://api.bing.com/a.html啦~

 

页面源码地址：https://github.com/x-shadow-x/searchBox