handleResponse = function(parent, json) {
var isEmpty = true;
for(var o in json){
if(o == 'data') isEmpty = false;
}
if(isEmpty) {
showError("返回数据格式错误,请检查请求URL是否正确!");
return;
}
if(json['data'].length == 0) {
//返回数据为空
return;
}
refreshDropDiv(parent, json);
dropDiv.show();
}
/**处理ajax失败的方法**/
handleError = function(error) {
//showError("由于url错误或超时请求失败!");
}
showError = function(error){
alert(error);
}
/**通过ajax返回json格式数据生成用来创建dom的字符串**/
render = function(parent, json) {
var res = json['data'] || json;
var appendStr = '';
//用json对象中内容替换模版字符串中匹配/{([a-z]+)}/ig的内容,如{word},{view}
for ( var i = 0; i < res.length; i+=1) {
appendStr += options.tpl.replace(/{([a-z]+)}/ig, function(m, n) {
return res[i][n];
});
}
jebind(parent, appendStr);
}
/**将新建dom对象插入到提示框中,并重新绑定mouseover事件监听**/
jebind = function(parent, a) {
dropDiv.append(a);
dropDiv.find('.list').each(function() {
$(this).unbind('mouseover').mouseover(function() {
unHoverAll();
$(this).addClass(options.listHoverCSS);
}).unbind('click').click(function(){
parent.val(getPointWord($(this)));
dropDiv.empty().hide();
parent.focus();
});
});
}
/**将提示框中所有列的hover样式去掉**/
unHoverAll = function() {
dropDiv.find('.list').each(function() {
$(this).removeClass(options.listHoverCSS);
});
}
/**在提示框中取得当前选中的提示关键字**/
getPointWord = function(p) {
return p.find('div:first').text()
}
/**刷新提示框,并设定样式**/
refreshDropDiv = function(parent, json) {
var left = parent.offset().left;
var height = parent.height();
var top = parent.offset().top + options.topoffset + height;
var width = options.width || parent.width() + 'px';
dropDiv.empty();
dropDiv.css( {
'border' : '1px solid #FE00DF',
'left' : left,
'top' : top,
'width' : width
});
render(parent, json);
//防止ajax返回之前输入框失去焦点导致提示框不消失
parent.focus();
}
/**通过ajax向服务器请求数据**/
getData = function(parent, word) {
$.ajax( {
type : 'GET',
data : "word="+ word,
url : options.url,
dataType : 'json',
timeout : 1000,
success : function(json){handleResponse(parent, json);},
error : handleError
});
}
});
}
})(jQuery);
网页上主要样式:
<style type="text/css">
.dropDiv {
position: absolute;
z-index: 10;
display: none;
cursor: hand;
}
.dropDiv .jhover {
background-color: #00FEDF;
}
.dropDiv .list {
float:left;
width:100%;
}
.dropDiv .word {
float:left;
}
.dropDiv .view {
