ys_auto_complete.css
|
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
|
.ys-auto-complete{
position
:
absolute
;
display
:
none
;
list-style-type
:
none
;
padding
:
0
;
border
:
1px
solid
#ccc
;
margin
:
0
;
background-color
:
#fff
;
z-index
:
999
;
}
.ys-auto-complete li{
height
:
32px
;
line-height
:
32px
;
font-size
:
14px
;
color
:
#222
;
padding-left
:
10px
;
}
.ys-auto-complete li:hover{
background-color
:
#eaeaea
;
cursor
:
pointer
;
}
|
ys_auto_complete.js
|
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
|
(
function
($){
var
defaultSettings = {
loadSource:
function
(keyWord,callback){
//
//var data = [];
//callback(this,data);
}
};
function
refreshAutoComplete(target,list){
if
(list==
null
||list.length==0){
return
;
}
var
ys_auto_complete_id = $(target).attr(
"ys_auto_complete"
);
var
container = $(
"#"
+ys_auto_complete_id);
var
html =
""
;
// render the data
list.forEach(
function
(item){
var
name = item.name;
var
value = item.value;
html +=
"<li value='"
+value+
"'>"
+name+
"</li>"
;
});
container.html(html);
// 计算auto_complete 坐标位置
var
top = $(target).offset().top+$(target).outerHeight()+1;
var
left = $(target).offset().left;
container.css({
"left"
:left+
"px"
,
"top"
:top+
"px"
});
var
ys_auto_complete_id = $(target).attr(
"ys_auto_complete"
);
$(
"#"
+ys_auto_complete_id).show();
}
var
renderHtml =
"<ul class='ys-auto-complete'></ul>"
;
function
renderAutoComplete(target,settings){
var
id =
"ys_auto_complete_"
+
new
Date().getTime()+
""
+parseInt(Math.random()*10000);
$(target).attr(
"ys_auto_complete"
,id);
$(renderHtml).attr(
"id"
,id).appendTo(
"html"
);
// 添加到文档中去
var
container = $(
"#"
+id);
var
width = $(target).outerWidth();
container.css({
"width"
:width+
"px"
});
return
container;
}
function
bindEventHandlers(target,container,settings){
var
timeout =
null
;
var
loadSource = settings.loadSource;
// 目标输入框键盘keypress事件
$(target).on(
"keydown"
,
function
(e){
e.stopPropagation();
clearTimeout(timeout);
console.log(
"-------------------------"
);
timeout = setTimeout(
function
(){
// load the data from backend
var
keyWord = $(target).val();
loadSource.call(target,keyWord,refreshAutoComplete);
},300);
});
// 点击空白区域 隐藏 auto_complete
$(document).on(
"click"
,
function
(e){
e.preventDefault();
$(
".ys-auto-complete"
).hide();
});
// 点击输入框 auto_complete 不隐藏
$(target).on(
"click"
,
function
(e){
e.stopPropagation();
e.preventDefault();
});
// auto_complete item click 事件
$(container).on(
"click"
,
"li"
,
function
(e){
e.stopPropagation();
e.preventDefault();
var
value = $(
this
).attr(
"value"
);
var
name = $(
this
).html(
"name"
);
$(target).val(value);
$(container).hide();
});
}
var
options = {
ysAutoComplete:
function
(settings) {
var
mergedSettings = {};
$.extend(mergedSettings,defaultSettings,settings);
$(
this
).each(
function
(){
var
container = renderAutoComplete(
this
,mergedSettings);
bindEventHandlers(
this
,container,mergedSettings);
});
}
};
$.fn.extend(options);
})(jQuery);
|
ys_auto_complete_demo.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
|
<!DOCTYPE html>
<
html
>
<
head
lang
=
"en"
>
<
meta
charset
=
"UTF-8"
>
<
title
></
title
>
<
link
rel
=
"stylesheet"
href
=
"../static/css/ys_ui_plugin/ys_auto_complete.css"
>
<
script
src
=
"../static/dist/js/jquery-1.11.3.min.js"
></
script
>
<
script
src
=
"../static/js/ys_ui_plugin/ys_auto_complete.js"
></
script
>
</
head
>
<
body
>
<
input
type
=
"text"
/>
<
script
>
$("input").ysAutoComplete({
loadSource:function(keyWord,callback){
var data = [
{value:"app",name:"Apple"},
{value:"bna",name:"Banana"},
{value:"org",name:"Orange"}
];
var that = this;
callback(that,data);
}
});
</
script
>
</
body
>
</
html
>
|
本文转自 antlove 51CTO博客，原文链接:http://blog.51cto.com/antlove/1774972
