javascript 自定义auto_complete-白红宇

ys_auto_complete.css

                         
.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

                         
(
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

                         
<!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