(function($) {
$.fn.extend({autopoint : function (settings) {
var parent = $(this);//文本输入框对象
var oldText = parent.val();//文本输入框中的内容
var dropDiv = $('').addClass('dropDiv').appendTo('body');
parent.keydown(function(event) {
if (dropDiv.css('display') != 'none') {//当提示层显示时才对键盘事件处理
var currentList = dropDiv.find('.' + constants.listHoverCSS);
if (event.keyCode == constants.keyDown) {//如果按的是向下方向键
if (currentList.length == 0) {
//如果提示列表没有一个被选中,则将列表第一个选中
parent.val(getPointWord(dropDiv.find('.list:first')
.mouseover()));
} else if (currentList.next().length == 0) {
//如果是最后一个被选中,则取消选中,即可认为是输入框被选中
unHoverAll();
} else {
unHoverAll();
//将原先选中列的下一列选中
if (currentList.next().length != 0)
parent.val(getPointWord(currentList.next()
.mouseover()));
}
return false;
} else if (event.keyCode == constants.keyUp) {//如果按的是向上方向键
if (currentList.length == 0) {
parent.val(getPointWord(dropDiv.find('.list:last')
.mouseover()));
} else if (currentList.prev().length == 0) {
unHoverAll();
} else {
unHoverAll();
if (currentList.prev().length != 0)
parent.val(getPointWord(currentList.prev()
.mouseover()));
}
return false;
}else if(event.keyCode == constants.keyEnter) dropDiv.empty().hide();
}
//当按下键之前记录输入框值,以方便查看键弹起时值有没有变
oldText = parent.val();
});
parent.keyup(function(event) {
//如果弹起的键是向上或向下方向键则返回
if(event.keyCode == constants.keyDown||event.keyCode == constants.keyUp) return;
//若输入框值没有改变或变为空则返回
var currentText = parent.val();
if (currentText == oldText)
return;
if(currentText == ''){
dropDiv.empty().hide();
return;
}
getData(currentText);
});
parent.blur(function() {
if(dropDiv.find('.' + constants.listHoverCSS)!=0) return;
//文本输入框失去焦点则清空并隐藏提示层
dropDiv.empty().hide();
});
/**处理ajax返回成功的方法**/
handleResponse = function(json) {
var isEmpty = true;
for(var o in json){
if(o == 'data') isEmpty = false;
}
if(isEmpty) {
showErrorMsg("返回数据格式错误,请检查请求URL是否正确!");
return;
}
if(json['data'].length == 0) {
//返回数据为空
return;
}
refreshDropDiv(json);
dropDiv.show();
}
/**处理ajax失败的方法**/
handleError = function(error) {
//showErrorMsg("由于url错误或超时请求失败!");
}
showErrorMsg = function(error){
alert(error);
}
/**通过ajax返回json格式数据生成用来创建dom的字符串**/
render = function(json) {
var res = json['data'] || json;
var appendStr = '';
//用json对象中内容替换模版字符串中匹配/\{([a-z]+)\}/ig的内容,如{word},{view}
for ( var i = 0; i < res.length; i+=1) {
appendStr += (settings.tpl||constants.tpl).replace(/\{([a-z]+)\}/ig, function(m, n) {
return res[i][n];
});
}
appendStr += '' ;
jebind(appendStr);
}
/**将新建dom对象插入到提示框中,并重新绑定mouseover事件监听**/
jebind = function(a) {
dropDiv.append(a);
dropDiv.find('.list').each(function() {
$(this).unbind('mouseover').mouseover(function() {
unHoverAll();
$(this).addClass(constants.listHoverCSS);
}).unbind('click').click(function(){
parent.val(getPointWord($(this)));
dropDiv.empty().hide();
parent.focus();
});
});
}
/**将提示框中所有列的hover样式去掉**/
unHoverAll = function() {
dropDiv.find('.list').each(function() {
$(this).removeClass(constants.listHoverCSS);
});
}
/**在提示框中取得当前选中的提示关键字**/
getPointWord = function(p) {
return p.find('div:first').text()
}
/**刷新提示框,并设定样式**/
refreshDropDiv = function(json) {
dropDiv.empty();
var left = parent.offset().left+2;
var height = parent.height();
var top = parent.offset().top + height;
var width = settings.width || parent.width()+30 + 'px';
dropDiv.css( {
'border' : '1px solid #D9D4D4',
'left' : left,
'top' : top,
'width' : width,
'position': 'absolute',
'z-index':20,
'background':'#F7F7F7'
});
render(json);
}
/**通过ajax向服务器请求数据**/
getData = function(word) {
$.ajax( {
type : 'POST',
data : {"word": word},
url : settings.url || '',
dataType : 'json',
timeout : 1000,
success : handleResponse,
error : handleError
});
}
/**一些常量**/
var constants = {
keyLeft : 37,//向左方向键
keyUp : 38,//向上方向键
keyRight : 39,//向右方向键
keyDown : 40,//向下方向键
keyEnter : 13,//回车键
listHoverCSS : 'jhover',//提示框列表鼠标悬浮的样式
//tpl : ''
tpl : ''
};
}
});
})(jQuery);