first commit
This commit is contained in:
@@ -0,0 +1,222 @@
|
||||
(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);
|
||||
Reference in New Issue
Block a user