前面的话：
在上周本来想发一篇模仿必应搜索的界面。但是在准备写文章之前突然想到前面学习了ajax技术，在这里我也让我的页面有一种不需要手动刷新就能获取到数据。但是发现用前面的方法并不能获取到我想要的效果。无奈前几天电脑换系统，把之前的源码丢了（前面有个不好的习惯就是把最近在做的东西放桌面）。今天想彻底把这个问题搞明白。
用jquery和ajax进行初步的尝试：
（本代码是参考慕课网，搜索框制作视频制作，有关具体详情请参考视频。自己之前的代码找不到了，之前最先的想法也是来自那里，所以这次直接用那里的代码）
html代码：
<div class="bg-div">
<div class="search-box">
<div class="logo"></div>
<form id="search-form">
<input type="text" class="search-input-text" autocomplete="off" name="q" id="search_input" />
<input type="submit" class="search-input-button" value="" id="search_submit">
</form>
</div>
</div>
<div class="suggest" id="search-suggest" <!--style="display:none;"--
<ul id="search-result">
<li>搜索结果1</li>
<li>搜索结果2</li>
</ul>
</div>
css代码：
* {
padding: 0;
margin: 0;
}
body {
}
.bg-div{
background-image: url('images/river.jpg');
width: 1228px;
height: 690px;
margin: 0 auto;
position: relative;
}
.logo {
background-image: url('images/logo.png');
width: 107px;
height: 53px;
float: left;
margin: -4px 18px 0 0;
}
form {
float: left;
background-color: #fff;
padding: 5px;
}
.search-input-text {
border: 0;
float: left;
height: 25px;
line-height: 25px;
outline: none;
width: 350px;
font-size: 16px;
}
.search-input-button {
border: 0;
background-image: url('images/search-button.png');
width: 29px;
height: 29px;
float: left;
}
.search-box {
position: absolute;
top: 200px;
left: 300px;
}
#search-suggest {
width: 388px;
background-color: #fff;
border: 1px solid #999;
display: none;
}
.suggest ul {
list-style: none;
}
.suggest ul li {
padding: 3px;
font-size: 14px;
line-height: 25px;
cursor: pointer;/*手型*/
/*这段代码去掉
position:absolute;
left:----px;
top:----px;
*/
}
.suggest ul li:hover {
text-decoration: underline;
background-color: #e5e5e5;
}
用jquery来实现效果：
在这之前，我们基本上得到了我们想要的图形效果，但是我们在搜索框内输入想要查询的内容这时候是不会有效果的（一般的搜索框效果都是在键盘输入的时候，下面会显示一部分与之关联的关键搜索信息，然后鼠标移动上去点击后会跳到相应链接）。为了一步步验证我们的思路，我们这里修改一下之前的代码。
1、将li标签中的定位去掉；
2、在html中将li标签设置为隐藏。然后我们进行后面的操作。
思考一：如何在键盘输入的时候就显示相关信息（即：li标签中的内容）？
思路：我们先引入jquery，然后文档加载完后执行一个键盘事件，然后在键盘事件中改变相应的css效果
$(function() {
//键盘事件
$("#search_input").bind("keyup", function() {
$("#search-suggest").show().css({
top : $("#search-form").offset().top + $("#search-form").height()+10,
left : $("#search-form").offset().left,
position : "absolute",
});
});
});
这时候，我们在搜索框中输入内容时，下面会跟着显示对应的搜索（模拟）
思考二：如何实现鼠标点击搜索按钮的时候，会搜索相应的内容？
思路：用鼠标点击事件，让鼠标点击后设置一个地址，点击后直接跳到相应地址，代码实现：
//事件代理 --》鼠标点击事件
$(document).delegate("li", "click", function() {
var keyword = $(this).text();
location.href = "http://cn.bing.com/search" + keyword;
});
思考三：我们如何在搜索框输入数据时，下面会提示相关搜素信息？
思路：我们我们用jquery中的get去实现，参考代码：
var searchText = $("#search_input").val();
$.get( "http://api.bing.com/qsonhs.aspx"+searchText , function(data) {
console.log(data);
var d = data.AS.Results[0].Suggests;
var html = "";
for(var i = 0; i < d.length; i++) {
html += "<li>"+d[i].Txt+"</li>";
}
$("#search-result").html(html);
}
, "json");
到这里，按理来说我们这里应该可以得到我们想要的结果了，但是，找了好久都没有发现哪里错了。视频里面接着描述了用JSONP来进行跨域操作，但是我也按视频中的操作，始终得不到我想要的结果，于是我埋头去看《javascript高级程序设计》，去找关于jsonp的用法
关于jsonp：
关于jsonp，《javascript高级程序设计》一书中介绍的比较少，下面是我看了之后的归纳。
jsonp的全写是 json with padding，其出现是为了解决各主浏览器的之间的同源策略的问题，一般来说ServerA 域下面的页面是没有办法与非 ServerA 下面的资源进行沟通，而 Html 的<script>元素是个例外，利用 <script> 这个开源策略，网页可以从其他来源动态获取 json数据，而这种模式就是所谓的 JSONP，用 jsonp 抓到并不是真正意义上 的 json 而是任意的 javascript ,它是直接通过 javascript 编译器编译而不是 json 解释器。更多关于json的知识请点击：http://www.cnblogs.com/foodoir/p/5894760.html查看
既然书上没有写，那就去网上搜索资源。这里截取一段和文章前面有关的信息的代码：
$.ajax({
type: "get",
async: false,
url: "http://flightQuery.com/jsonp/flightResult.aspx",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写""，jQuery会自动为你处理数据
success: function(json){
alert(json.price + json.tickets + ' 张。');
},
error: function(){
alert('fail');
}
});
通过这段代码来修改我们自己的代码：
$.ajax({
type: "GET",
url: "http://api.bing.com/qsonhs.aspx" + searchText,
dataType: "jsonp",
jsonp: 'cb',
success: function(data) {
var d = data.AS.Results[0].Suggests;
var html = "";
for(var i = 0; i < d.length; i++) {
html += "<li>" + d[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,
position: "absolute",
});
}
})
更多思考：我们可以在前面增加一些判断，让我们的效果实现起来更完美
if(data == null) {
$("#search-suggest").hide();
return false;
}
if(data.AS == null) {
$("#search-suggest").hide();
return false;
}
if(data.AS.Results == null) {
$("#search-suggest").hide();
return false;
}
if(data.AS.Results[0] == null) {
$("#search-suggest").hide();
return false;
}
if(data.AS.Results[0].Suggests == null) {
$("#search-suggest").hide();
return false;
}
经过测试前面的代码，发现还有不足，进一步修改代码：
$("#search-form").submit(function() {
var keyword = $("#search_input").val();
console.log("word=" + keyword);
//if (keyword == null) {return false;}
location.href = "http://cn.bing.com/search" + keyword;
});
到这里，我们的效果差不多就出来了，效果截图：
源代码已托管至：http://sandbox.runjs.cn/show/gfdpkysk，点击即可查看。
后面的话：
这些天学习的新东西挺多的，现在有一个想法就是把最近学的东西把它串联起来，做一个综合的效果。参考必应网站，真的有好多东西已经可以做出来了，接下来的一段时间就好好的把自己想要做的效果实现好。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！