222 lines
7.4 KiB
JavaScript
222 lines
7.4 KiB
JavaScript
(function($) {
|
|
$.fn.autopoint = function(options) {
|
|
defaults = {
|
|
url : options.url,
|
|
keyLeft : 37,// 向左方向键
|
|
keyUp : 38,// 向上方向键
|
|
keyRight : 39,// 向右方向键
|
|
keyDown : 40,// 向下方向键
|
|
keyEnter : 13,// 回车键
|
|
listHoverCSS : 'hoverLi',// 提示框列表鼠标悬浮的样式
|
|
topoffset : options.topoffset || 10
|
|
};
|
|
var options = $.extend(defaults, options);
|
|
var dropDiv = $('<ul id="tie" class="hide"></ul>').appendTo('#adjust_text');
|
|
var isOver = false;
|
|
dropDiv.hover(function() {
|
|
isOver = true;
|
|
}, function() {
|
|
isOver = false;
|
|
});
|
|
return this
|
|
.each(function() {
|
|
var pa = $(this);
|
|
$(this)
|
|
.bind(
|
|
'keydown',
|
|
function(event) {
|
|
if (dropDiv.css('display') != 'none') {// 当提示层显示时才对键盘事件处理
|
|
var currentList = dropDiv
|
|
.find('.' + options.listHoverCSS);
|
|
if (event.keyCode == options.keyDown) {// 如果按的是向下方向键
|
|
if (currentList.length == 0 || getPointWord(currentList.next()
|
|
.mouseover())=="") {
|
|
// 如果提示列表没有一个被选中,则将列表第一个选中
|
|
$(this)
|
|
.val(
|
|
getPointWord(dropDiv
|
|
.find('.list:first')
|
|
.mouseover()));
|
|
} else if (currentList.next().length == 0) {
|
|
// 如果是最后一个被选中,则取消选中,即可认为是输入框被选中
|
|
unHoverAll();
|
|
} else {
|
|
unHoverAll();
|
|
// 将原先选中列的下一列选中
|
|
if (currentList.next().length != 0)
|
|
$(this)
|
|
.val(
|
|
getPointWord(currentList
|
|
.next()
|
|
.mouseover()));
|
|
}
|
|
return false;
|
|
} else if (event.keyCode == options.keyUp) {// 如果按的是向上方向键
|
|
if (currentList.length == 0 || getPointWord(currentList.prev()
|
|
.mouseover())=="") {
|
|
$(this)
|
|
.val(
|
|
getPointWord(dropDiv
|
|
.find(
|
|
'.list:last')
|
|
.mouseover()));
|
|
} else if (currentList.prev().length == 0) {
|
|
unHoverAll();
|
|
} else {
|
|
unHoverAll();
|
|
if (currentList.prev().length != 0)
|
|
$(this)
|
|
.val(
|
|
getPointWord(currentList
|
|
.prev()
|
|
.mouseover()));
|
|
}
|
|
return false;
|
|
} else if (event.keyCode == options.keyEnter)
|
|
{
|
|
dropDiv.empty().hide();
|
|
}
|
|
}
|
|
// 当按下键之前记录输入框值,以方便查看键弹起时值有没有变
|
|
$(this).attr('alt', $(this).val());
|
|
})
|
|
.bind(
|
|
'keyup',
|
|
function(event) {
|
|
// 如果弹起的键是向上或向下方向键则返回
|
|
if (event.keyCode == options.keyDown
|
|
|| event.keyCode == options.keyUp)
|
|
return;
|
|
//modified by weic.lu 输入英文文本长度大等于2时才搜索
|
|
//中文长度>=1
|
|
var kwLength = 0;
|
|
if($(this).val() != '' && $(this).val().length>1)
|
|
{
|
|
var kwContent = $(this).val();
|
|
for(var i=0; i<kwContent.length; i++)
|
|
{
|
|
if(kwContent.charCodeAt(i)>255)
|
|
{
|
|
kwLength += 2;
|
|
}
|
|
else
|
|
{
|
|
kwLength += 1;
|
|
}
|
|
if(kwLength>=2)
|
|
{
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
if ($(this).val() == '' || kwLength.length<2) {
|
|
dropDiv.empty().hide();
|
|
return;
|
|
}
|
|
// 若输入框值没有改变或变为空则返回
|
|
if ($(this).val() == $(this)
|
|
.attr('alt'))
|
|
return;
|
|
getData(pa, $(this).val());
|
|
})
|
|
.bind(
|
|
'blur',
|
|
function() {
|
|
if (isOver
|
|
&& dropDiv
|
|
.find('.' + options.listHoverCSS) != 0)
|
|
return;
|
|
// 文本输入框失去焦点则清空并隐藏提示层
|
|
dropDiv.empty().hide();
|
|
});
|
|
/** 处理ajax返回成功的方法* */
|
|
handleResponse = function(parent, json) {
|
|
if (json == null || json.length == 0) {
|
|
// 返回数据为空
|
|
$("#tie").hide();
|
|
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 appendStr = '';
|
|
// 用json对象中内容替换模版字符串中匹配/\{([a-z]+)\}/ig的内容,如{word},{view}
|
|
for ( var i = 0; i < json.length; i ++) {
|
|
if(i<json.length)
|
|
appendStr += '<li class="list" title="'+json[i].name+'"><span>约'+json[i].num+'条</span><div>'+json[i].name+'</div></li>';
|
|
}
|
|
appendStr += '<li class="close"><a onclick=$("#tie").hide() href="javascript:void(0)">[关闭]</a></li>' ;
|
|
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();
|
|
var reqUrl = options.url.replace("searchsuggest.do","searchgoods.do");
|
|
window.location.href = reqUrl + "?keyword="
|
|
+ encodeURI(parent.val());
|
|
});
|
|
});
|
|
}
|
|
/**将提示框中所有列的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(
|
|
{"background":"none repeat scroll 0 0 #FFFFFF",
|
|
"border":"1px solid #990005",
|
|
"overflow":"hidden",
|
|
"position":"absolute",
|
|
"top":"30px",
|
|
"width":"350px"}
|
|
);
|
|
|
|
|
|
render(parent, json);
|
|
//防止ajax返回之前输入框失去焦点导致提示框不消失
|
|
parent.focus();
|
|
}
|
|
/**通过ajax向服务器请求数据**/
|
|
getData = function(parent, word) {
|
|
word = word.replace(/[()'";,{}~!@#$%^&*(){}?\|<>.]/g,"");
|
|
$.getJSON(options.url+"?keyword="+encodeURI(encodeURI(word))+"&callback=?",function(json) {
|
|
handleResponse(parent, json);
|
|
}
|
|
);
|
|
}
|
|
});
|
|
}
|
|
})(jQuery); |