输入悬停提示JS组件

// JavaScript Document
/**
 * 此插件用实现类似于百度搜索栏的搜索提示功能
 * 
 * @author 周正德
 * @copyright
 * @returns
 * @date 2013/12/30
 */
function JHoverUnit() {
this.listeningTo = null;
this.url = null;
this.container = null;
this.listeningToForm = null;


this.hover = {
backgroundColor : '#66CCFF',
font : '16px 微软雅黑 '
};
this.out = {
backgroundColor : '#FFFFFF',
font : '12px 微软雅黑 '
};
this.container_css = {
position : 'absolute',
padding : '0px',
display : 'none',
backgroundColor : '#FFF',
border : '1px solid #999999',
borderTop : 'none',
boxShadow : '0 0 5px #000'
};
this.containerChildren_css = {
listStyle : 'none',
padding : '3px',
font : '12px 微软雅黑',
backgroundColor : '#FFF',
overflow : 'hidden'
};


this.execute = function() {
if (this.url == "")
alert("URI不存在，请指定！");
if (this.container == null) {
var els = document.createElement("div");
$(els).attr("id", "term_match_values");
$(this.listeningTo).parent().parent().append(els);
this.container = "#term_match_values";
}
$($(this.container).css(this.container_css));
JHoverCall(this);
};
}
// 主要处理方法
var JHoverCall = function(unit) {
// 为了后期便于维护，所以此处重定义大量变量
var term_key = unit.listeningTo;
var hover = unit.hover;
var out = unit.out;
var url = unit.url;
var term_area = unit.container;
var size = unit.size;


var term_area_li = term_area + " li";
var obj = $(term_key);
var term_item = null;
var currentIndex = -1;
var old_val = "";
$(term_key).attr("autocomplete", "off");

setInterval(function() {
if (obj.val().trim() == old_val || obj.val().trim() == '')
return;
old_val = obj.val().trim();
if (old_val.trim().length == 0)
return;
$.post(url, $(unit.listeningToForm).serialize(), function(data) {
$(term_area_li).remove();
for ( var i = 0; i < data.kwList.length; i++) {
var elt = document.createElement("li");
var elt2 = document.createElement("label");
$(elt2).css("display", "none").text(data.kwList[i]);
$(elt).html(data.kwList[i]);
$(elt).append(elt2);
$(elt).css(unit.containerChildren_css);
$(term_area).append(elt);
}
}, 'json');
}, 500);
// 加载并显示条件匹配内容域
$(term_key).live('keydown',function(e) {
$(term_area).css({
display : 'block',
top : $(this).position().top + parseInt($(this).css("height")) + 5 + "px",
left : $(this).position().left + "px",
width : parseInt($(this).css('width')) + 2 + 'px'
});


// 上下切换选项
switch (e.keyCode) {
case 37:
case 38:
currentIndex <= 0 ? currentIndex = $(term_area_li).size() - 1 : currentIndex--;
break;
case 39:
case 40:
currentIndex >= $(term_area_li).size() - 1 ? currentIndex = 0 : currentIndex++;
break;
}
// 切换样式转换
if (currentIndex >= 0) {
term_item = $(term_area_li).eq(currentIndex);
term_item.css(hover);
term_item.siblings().each(function() {
$(this).css(out);
});
}
if (e.keyCode == 13 && term_item != null) {// 回车完成复制
copy_match_val(obj, term_item);
term_item.css(out);
term_item = null;
currentIndex = -1;
$(term_area).css("display", 'none');
$(term_area_li).remove();
}
}).live('blur',function() {
// 控制条件匹配内容域的隐藏逻辑
$(term_area).css("display", 'none');
if (term_item != null) {
copy_match_val(obj, term_item);
term_item.css(out);
$(term_area_li).remove();
}
currentIndex = -1;
});
$(term_area_li).live("mouseover", function(e) {
$(this).css(hover).siblings().css(out);
term_item = $(this);
}).live("mouseout", function() {
term_item = null;
});
};
// 将选中的内容复制到输入框
function copy_match_val(obj, res) {
$(obj).val($(res).children("label").text());
}