标签：web html js 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>
标签：web html js auto_complete
原文地址：http://antlove.blog.51cto.com/10057557/1774972
