-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathajax-search.html
152 lines (139 loc) · 4.21 KB
/
ajax-search.html
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>bing Search</title>
<style>
body {
background: #333;
}
#bg_div {
position: relative;
background-image: url("bg.jpg");
width: 1300px;
height: 690px;
margin: 0 auto;
}
#search_box {
position: absolute;
top: 150px;
left: 200px;
}
#logo {
background-image: url("logo.png");
height: 53px;
width: 107px;
float: left;
margin: -4px 18px 0 0;
}
#search_form {
background-color: #fff;
float: left;
padding: 5px;
}
#search_input {
font-size: 20px;
height: 29px;
line-height: 29px;
width: 350px;
border: 0;
outline: none;
float: left;
}
#search_submit {
background-image: url(search-button.png);
width: 29px;
height: 29px;
border: 0;
}
#suggest {
display: none;
width: 388px;
background-color: #fff;
position: absolute;
border-width: 1px;
border-style: solid;
border-color: #999;
padding: 0;
margin: 0;
}
#suggest_result {
list-style: none;
padding: 0;
margin: 0;
}
#suggest_result li {
padding: 3px;
line-height: 25px;
font-size: 14px;
color: #777;
cursor: pointer;
}
#suggest_result li:hover {
background-color: #e5e5e5;
}
</style>
</head>
<body>
<div id="bg_div">
<div id="search_box">
<div id="logo"></div>
<form id="search_form" action="https://cn.bing.com/search" target="_blank">
<input type="text" id="search_input" name="q">
<input type="submit" id="search_submit" value="">
</form>
</div>
</div>
<div id="suggest">
<ul id="suggest_result">
</ul>
</div>
<!-- 以下方法为jquery实现 ajax请求 使用jsonp方法实现跨域 -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$('#search_input').on('keyup', function() {
var searchText = $(this).val();
var getdata = function(data) {
var d = data.AS.Results[0].Suggests;
var html = "";
// 将从服务器拿到的数据拼接成完整的html标签
for (var i = 0; i < d.length; i++) {
html += '<li>' + d[i].Txt + '</li>';
}
$('#suggest_result').html(html);
$('#suggest').css({
top: $('#search_form').offset().top + $('#search_form').height() + 10,
left: $('#search_form').offset().left
//position:'absolute'
}).show();
};
$.ajax({
type: "GET",
url: "http://api.bing.com/qsonhs.aspx?type=cb&cb=getdata&q=" + searchText,
dataType: "jsonp",
async: false,
jsonp: "getdata",
jsonpCallback: "getdata",
success: function(data) {
getdata(data);
}
});
});
// 用户点击其他位置搜索框消失 提高用户体验
$(document).on('click', function() {
$('#suggest').hide();
});
// 事件代理 同事给多个元素绑定事件 并且这些节点是通过js动态生成的一般会用事件代理
//jquery的delegate()方法
// delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
//使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
$('#suggest').delegate('li', 'click', function() {
var keyword = $(this).text();
location.href = 'http://cn.bing.com/search?q=' + keyword;
});
});
</script>
</body>
</html>