静态内容的实现
有一个居中背景图,图里嵌套一个logo加表单form
1 | <body> |
样式实现
1 | body { |
实现的效果
js部分的实现
引入jq
1 | <script src="jquery.min.js"></script> |
完成jsonp+ajax跨域访问1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39$(document).ready(function() {
$("#search-input").bind('keyup', function () {
var inputText = $("#search-input").val();
var callback= 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").css({
top: $('#search-form').offset().top + $("#search-form").height() + 10,
left: $('#search-form').offset().left,
position:'absolute'
}).show();
};
$.ajax({
type: "get",
async: false,
url: "http://api.bing.com/qsonhs.aspx?type=cb&cb=callback&q=" + inputText,
dataType: "jsonp",
jsonp: "callback",
jsonpCallback:"callback",
success: function (data) {
callback(data);
},
error: function (data) {
console.log(data);
}
});
});
$(document).bind('click',function(){
$('#search-suggest').hide();
});
$('#search-suggest').delegate('li','click', function () {
var keyword=$(this).text();
location.href='http://cn.bing.com/search?q='+keyword;
});
});
代码详解
1.实现智能提示框的定位
用jq的css()方法控制search-form
的position实现定位
2.完成ajax部分
通过jq的ajax()方法加载远程数据,通过获取的远程数据来填充智能提示框,通过datatype为jsonp实现跨域访问,避开同源策略
1 | $.ajax({ |
3.完成智能提示的填充
总的还是要通过绑定用户的可以keyup来触发函数
1 | var inputText = $("#search-input").val(); |
上述的data.AS.Results[0].Suggests
是什么?
用F12打开调试进入Network->Preview可以看到
返回的数据是
1 | if(typeof callback == 'function') callback({"AS":{"Query":"你好","FullResults":1,"Results":[{"Type":"AS","Suggests":[{"Txt":"你好小娜","Type":"AS","Sk":"","HCS":0.577300},{"Txt":"你好啊","Type":"AS","Sk":"AS1"},{"Txt":"你好外星人","Type":"AS","Sk":"AS2"},{"Txt":"你好陌生人","Type":"AS","Sk":"AS3"},{"Txt":"你好的日语","Type":"AS","Sk":"AS4"},{"Txt":"你好你好","Type":"AS","Sk":"AS5"},{"Txt":"你好菜鸟","Type":"AS","Sk":"AS6"},{"Txt":"你好 旧时光","Type":"AS","Sk":"AS7"}]}]}} /* pageview_candidate */); |
接着通过data.AS.Results[0].Suggests
我们就可以获得我们所需的数据,填充入下面的提示框,完成填充
最终完成的效果
参考链接:
http://www.w3school.com.cn/jquery/ajax_ajax.asp
http://www.imooc.com/learn/21
可自由转载、引用,但需署名作者且注明文章出处。