jquery 模擬類搜索框自動完成搜索提示功能(改進)
2024-05-06 14:09:54
供稿：網友
autopoint.js代碼:
代碼如下:
/*
* @date: 2010-5-22 21:42:15
* @author: 胡靈偉
* Depends:
* jquery.js
*
* function:類似GOOGLE搜索框提示功能
*/
(function($) {
$.fn.autopoint = function (options) {
defaults = {
url:options.url,
keyLeft : 37,//向左方向鍵
keyUp : 38,//向上方向鍵
keyRight : 39,//向右方向鍵
keyDown : 40,//向下方向鍵
keyEnter : 13,//回車鍵
listHoverCSS : 'jhover',//提示框列表鼠標懸浮的樣式
tpl : '<div class="list"><div class="word">{word}</div><div class="view">約{view}條記錄</div></div>',
topoffset:options.topoffset||5
};
var options = $.extend(defaults, options);
var dropDiv = $('<div></div>').addClass('dropDiv').appendTo('body');
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) {
//如果提示列表沒有一個被選中,則將列表第一個選中
$(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) {
$(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;
if($(this).val() == ''){
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返回成功的方法**/
