jquery シミュレーション検索ボックスは検索プロンプト機能を自動的に完了します (改善)_jquery

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 : '

{word}

约{view}条记录

',
topoffset:options.topoffset||5
};
var options = $.extend(defaults, options);
var dropDiv = $('

').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') {//Keyboard events are only processed when the prompt layer is displayed
var currentList = dropDiv.find( '.' options.listHoverCSS);
if (event.keyCode == options.keyDown) {//If the down arrow key is pressed
if (currentList.length == 0) {
/ /If no one in the prompt list is selected, select the first one in the list
$(this).val(getPointWord(dropDiv.find('.list:first')
.mouseover()));
} else if (currentList.next().length == 0) {
//If the last one is selected, uncheck it, which means the input box is selected
unHoverAll();
} else {
unHoverAll();
//Select the next column of the originally selected column
if (currentList.next().length != 0)
$(this).val (getPointWord(currentList.next()
.mouseover()));
}
return false;
} else if (event.keyCode == options.keyUp) {//If pressed It is the up arrow key
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();
}
//Record the input box value before pressing the key to facilitate checking whether the value has changed when the key is popped up
$(this).attr('alt', $(this).val());
}).bind('keyup', function(event){
//If the popped key is Up or down arrow keys return
if(event.keyCode == options.keyDown||event.keyCode == options.keyUp) return;
if($(this).val() == ' '){
dropDiv.empty().hide();
return;
}
//If the input box value does not change or becomes empty, return
if ($(this ).val() == $(this).attr('alt'))
return;
getData(pa, $(this).val());
}).bind(' blur', function(){
if(isOver&&dropDiv.find('.' options.listHoverCSS)!=0) return;
//If the text input box loses focus, it will be cleared and the prompt layer will be hidden
dropDiv. empty().hide();
});
/**Methods to handle ajax return success**/
handleResponse = function(parent, json) {
var isEmpty = true;
for( var o in json){
if(o == 'data') isEmpty = false;
}
if(isEmpty) {
showError("The returned data format is wrong, please check whether the request URL is Correct!");
return;
}
if(json['data'].length == 0) {
//The return data is empty
return;
}
refreshDropDiv(parent, json);
dropDiv.show();
}
/**How to handle ajax failure**/
handleError = function(error) {
//showError ("The request failed due to url error or timeout!");
}
showError = function(error){
alert(error);
}
/**Return json format data through ajax to generate a string used to create dom**/
render = function(parent, json) {
var res = json['data'] || json;
var appendStr = '';
//Replace template characters with the content in the json object Content matching /{([a-z] )}/ig in the string, such as {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);
}
/**Insert the new DOM object into the prompt box and rebind the mouseover event listener**/
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();
});
});
}
/**Remove the hover style from all columns in the prompt box**/
unHoverAll = function() {
dropDiv.find('.list').each(function() {
$(this).removeClass(options.listHoverCSS);
});
}
/**Get the currently selected prompt keyword in the prompt box**/
getPointWord = function(p) {
return p.find('div:first').text()
}
/**Refresh the prompt box and set the style**/
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);
/ /Prevent the input box from losing focus before ajax returns and causing the prompt box to not disappear
parent.focus();
}
/**Request data from server via 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
});
}
}; 🎜>
コードは次のとおりです: