|
|
|
|
(function($){
|
|
|
|
|
var bigAutocomplete = new function(){
|
|
|
|
|
this.currentInputText = null;//Ŀǰ<C4BF><C7B0><EFBFBD>ù<EFBFBD><C3B9><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><F2A3A8BD><EFBFBD>һ<EFBFBD><D2BB>ҳ<EFBFBD><D2B3><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Զ<EFBFBD><D4B6><EFBFBD>ȫ<EFBFBD><C8AB><EFBFBD>ܣ<EFBFBD>
|
|
|
|
|
this.functionalKeyArray = [9,20,13,16,17,18,91,92,93,45,36,33,34,35,37,39,112,113,114,115,116,117,118,119,120,121,122,123,144,19,145,40,38,27];//<2F><><EFBFBD><EFBFBD><EFBFBD>Ϲ<EFBFBD><CFB9>ܼ<EFBFBD><DCBC><EFBFBD>ֵ<EFBFBD><D6B5><EFBFBD><EFBFBD>
|
|
|
|
|
this.holdText = null;//<2F><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ԭʼ<D4AD><CABC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
|
|
|
|
|
|
|
|
|
//<2F><>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Զ<EFBFBD><D4B6><EFBFBD>ȫdiv<69><76><EFBFBD><EFBFBD><EFBFBD><EFBFBD>documentע<74><D7A2>mousedown<77><6E><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>div<69><76><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>div
|
|
|
|
|
this.init = function(){
|
|
|
|
|
$("body").append("<div id='bigAutocompleteContent' class='bigautocomplete-layout'></div>");
|
|
|
|
|
$(document).bind('mousedown',function(event){
|
|
|
|
|
var $target = $(event.target);
|
|
|
|
|
if((!($target.parents().andSelf().is('#bigAutocompleteContent'))) && (!$target.is(bigAutocomplete.currentInputText))){
|
|
|
|
|
bigAutocomplete.hideAutocomplete();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
//<2F><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ͣʱѡ<CAB1>е<EFBFBD>ǰ<EFBFBD><C7B0>
|
|
|
|
|
$("#bigAutocompleteContent").delegate("tr", "mouseover", function() {
|
|
|
|
|
$("#bigAutocompleteContent tr").removeClass("ct");
|
|
|
|
|
$(this).addClass("ct");
|
|
|
|
|
}).delegate("tr", "mouseout", function() {
|
|
|
|
|
$("#bigAutocompleteContent tr").removeClass("ct");
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//<2F><><EFBFBD><EFBFBD>ѡ<EFBFBD><D1A1><EFBFBD>к<EFBFBD><D0BA><EFBFBD>ѡ<EFBFBD><D1A1><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>õ<EFBFBD><C3B5><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>У<EFBFBD><D0A3><EFBFBD>ִ<EFBFBD><D6B4>callback<63><6B><EFBFBD><EFBFBD>
|
|
|
|
|
$("#bigAutocompleteContent").delegate("tr", "click", function() {
|
|
|
|
|
bigAutocomplete.currentInputText.val( $(this).find("div:last").html());
|
|
|
|
|
var callback_ = bigAutocomplete.currentInputText.data("config").callback;
|
|
|
|
|
if($("#bigAutocompleteContent").css("display") != "none" && callback_ && $.isFunction(callback_)){
|
|
|
|
|
callback_($(this).data("jsonData"));
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
bigAutocomplete.hideAutocomplete();
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.autocomplete = function(param){
|
|
|
|
|
|
|
|
|
|
if($("body").length > 0 && $("#bigAutocompleteContent").length <= 0){
|
|
|
|
|
bigAutocomplete.init();//<2F><>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD>Ϣ
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var $this = $(this);//Ϊ<><CEAA><EFBFBD><EFBFBD><EFBFBD>Զ<EFBFBD><D4B6><EFBFBD>ȫ<EFBFBD><C8AB><EFBFBD>ܵ<EFBFBD><DCB5><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>jquery<72><79><EFBFBD><EFBFBD>
|
|
|
|
|
|
|
|
|
|
var $bigAutocompleteContent = $("#bigAutocompleteContent");
|
|
|
|
|
|
|
|
|
|
this.config = {
|
|
|
|
|
//width:<3A><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ŀ<EFBFBD><C4BF>ȣ<EFBFBD>Ĭ<EFBFBD><C4AC>ʹ<EFBFBD><CAB9><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
|
|
|
|
width:$this.outerWidth() - 2,
|
|
|
|
|
//url<72><6C><EFBFBD><EFBFBD>ʽurl:""<22><><EFBFBD><EFBFBD>ajax<61><78>̨<EFBFBD><CCA8>ȡ<EFBFBD><C8A1><EFBFBD>ݣ<EFBFBD><DDA3><EFBFBD><EFBFBD>ص<EFBFBD><D8B5><EFBFBD><EFBFBD>ݸ<EFBFBD>ʽΪdata<74><61><EFBFBD><EFBFBD>һ<EFBFBD><D2BB>
|
|
|
|
|
url:null,
|
|
|
|
|
/*data<EFBFBD><EFBFBD><EFBFBD><EFBFBD>ʽ{data:[{title:null,result:{}},{title:null,result:{}}]}
|
|
|
|
|
url<EFBFBD><EFBFBD>data<EFBFBD><EFBFBD><EFBFBD><EFBFBD>ֻ<EFBFBD><EFBFBD>һ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ч<EFBFBD><EFBFBD>data<EFBFBD><EFBFBD><EFBFBD><EFBFBD>*/
|
|
|
|
|
data:null,
|
|
|
|
|
//callback<63><6B>ѡ<EFBFBD><D1A1><EFBFBD>кس<F3B0B4BB><D8B3><EFBFBD>ʱ<EFBFBD>ص<EFBFBD><D8B5>ĺ<EFBFBD><C4BA><EFBFBD>
|
|
|
|
|
callback:null};
|
|
|
|
|
$.extend(this.config,param);
|
|
|
|
|
|
|
|
|
|
$this.data("config",this.config);
|
|
|
|
|
|
|
|
|
|
//<2F><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>keydown<77>¼<EFBFBD>
|
|
|
|
|
$this.keydown(function(event) {
|
|
|
|
|
switch (event.keyCode) {
|
|
|
|
|
case 40://<2F><><EFBFBD>¼<EFBFBD>
|
|
|
|
|
|
|
|
|
|
if($bigAutocompleteContent.css("display") == "none")return;
|
|
|
|
|
|
|
|
|
|
var $nextSiblingTr = $bigAutocompleteContent.find(".ct");
|
|
|
|
|
if($nextSiblingTr.length <= 0){//û<><C3BB>ѡ<EFBFBD><D1A1><EFBFBD><EFBFBD>ʱ<EFBFBD><CAB1>ѡ<EFBFBD>е<EFBFBD>һ<EFBFBD><D2BB>
|
|
|
|
|
$nextSiblingTr = $bigAutocompleteContent.find("tr:first");
|
|
|
|
|
}else{
|
|
|
|
|
$nextSiblingTr = $nextSiblingTr.next();
|
|
|
|
|
}
|
|
|
|
|
$bigAutocompleteContent.find("tr").removeClass("ct");
|
|
|
|
|
|
|
|
|
|
if($nextSiblingTr.length > 0){//<2F><><EFBFBD><EFBFBD>һ<EFBFBD><D2BB>ʱ<EFBFBD><CAB1><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>һ<EFBFBD>У<EFBFBD>
|
|
|
|
|
$nextSiblingTr.addClass("ct");//ѡ<>е<EFBFBD><D0B5>мӱ<D0BC><D3B1><EFBFBD>
|
|
|
|
|
$this.val($nextSiblingTr.find("div:last").html());//ѡ<><D1A1><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>õ<EFBFBD><C3B5><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
|
|
|
|
|
|
|
|
|
//div<69><76><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ѡ<EFBFBD>е<EFBFBD><D0B5><EFBFBD>,jquery-1.6.1 $nextSiblingTr.offset().top <20><>bug<75><67><EFBFBD><EFBFBD>ֵ<EFBFBD><D6B5><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
|
|
|
|
$bigAutocompleteContent.scrollTop($nextSiblingTr[0].offsetTop - $bigAutocompleteContent.height() + $nextSiblingTr.height() );
|
|
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
$this.val(bigAutocomplete.holdText);//<2F><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ʾ<EFBFBD>û<EFBFBD>ԭʼ<D4AD><CABC><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ֵ
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
case 38://<2F><><EFBFBD>ϼ<EFBFBD>
|
|
|
|
|
if($bigAutocompleteContent.css("display") == "none")return;
|
|
|
|
|
|
|
|
|
|
var $previousSiblingTr = $bigAutocompleteContent.find(".ct");
|
|
|
|
|
if($previousSiblingTr.length <= 0){//û<><C3BB>ѡ<EFBFBD><D1A1><EFBFBD><EFBFBD>ʱ<EFBFBD><CAB1>ѡ<EFBFBD><D1A1><EFBFBD><EFBFBD><EFBFBD><EFBFBD>һ<EFBFBD><D2BB><EFBFBD><EFBFBD>
|
|
|
|
|
$previousSiblingTr = $bigAutocompleteContent.find("tr:last");
|
|
|
|
|
}else{
|
|
|
|
|
$previousSiblingTr = $previousSiblingTr.prev();
|
|
|
|
|
}
|
|
|
|
|
$bigAutocompleteContent.find("tr").removeClass("ct");
|
|
|
|
|
|
|
|
|
|
if($previousSiblingTr.length > 0){//<2F><><EFBFBD><EFBFBD>һ<EFBFBD><D2BB>ʱ<EFBFBD><CAB1><EFBFBD><EFBFBD><EFBFBD>ǵ<EFBFBD>һ<EFBFBD>У<EFBFBD>
|
|
|
|
|
$previousSiblingTr.addClass("ct");//ѡ<>е<EFBFBD><D0B5>мӱ<D0BC><D3B1><EFBFBD>
|
|
|
|
|
$this.val($previousSiblingTr.find("div:last").html());//ѡ<><D1A1><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>õ<EFBFBD><C3B5><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
|
|
|
|
|
|
|
|
|
//div<69><76><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ѡ<EFBFBD>е<EFBFBD><D0B5><EFBFBD>,jquery-1.6.1 $$previousSiblingTr.offset().top <20><>bug<75><67><EFBFBD><EFBFBD>ֵ<EFBFBD><D6B5><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
|
|
|
|
$bigAutocompleteContent.scrollTop($previousSiblingTr[0].offsetTop - $bigAutocompleteContent.height() + $previousSiblingTr.height());
|
|
|
|
|
}else{
|
|
|
|
|
$this.val(bigAutocomplete.holdText);//<2F><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ʾ<EFBFBD>û<EFBFBD>ԭʼ<D4AD><CABC><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ֵ
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
case 27://ESC<53><43><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
|
|
|
|
|
|
|
|
|
bigAutocomplete.hideAutocomplete();
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//<2F><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>keyup<75>¼<EFBFBD>
|
|
|
|
|
$this.keyup(function(event) {
|
|
|
|
|
var k = event.keyCode;
|
|
|
|
|
var ctrl = event.ctrlKey;
|
|
|
|
|
var isFunctionalKey = false;//<2F><><EFBFBD>µļ<C2B5><C4BC>Ƿ<EFBFBD><C7B7>ǹ<EFBFBD><C7B9>ܼ<EFBFBD>
|
|
|
|
|
for(var i=0;i<bigAutocomplete.functionalKeyArray.length;i++){
|
|
|
|
|
if(k == bigAutocomplete.functionalKeyArray[i]){
|
|
|
|
|
isFunctionalKey = true;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//k<><6B>ֵ<EFBFBD><D6B5><EFBFBD>ǹ<EFBFBD><C7B9>ܼ<EFBFBD><DCBC><EFBFBD><EFBFBD><EFBFBD>ctrl+c<><63>ctrl+xʱ<78>Ŵ<EFBFBD><C5B4><EFBFBD><EFBFBD>Զ<EFBFBD><D4B6><EFBFBD>ȫ<EFBFBD><C8AB><EFBFBD><EFBFBD>
|
|
|
|
|
if(!isFunctionalKey && (!ctrl || (ctrl && k == 67) || (ctrl && k == 88)) ){
|
|
|
|
|
var config = $this.data("config");
|
|
|
|
|
|
|
|
|
|
var offset = $this.offset();
|
|
|
|
|
$bigAutocompleteContent.width(config.width);
|
|
|
|
|
var h = $this.outerHeight() - 1;
|
|
|
|
|
$bigAutocompleteContent.css({"top":offset.top + h,"left":offset.left});
|
|
|
|
|
|
|
|
|
|
var data = config.data;
|
|
|
|
|
var url = config.url;
|
|
|
|
|
var keyword_ = $.trim($this.val());
|
|
|
|
|
if(keyword_ == null || keyword_ == ""){
|
|
|
|
|
bigAutocomplete.hideAutocomplete();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if(data != null && $.isArray(data) ){
|
|
|
|
|
var data_ = new Array();
|
|
|
|
|
for(var i=0;i<data.length;i++){
|
|
|
|
|
if(data[i].title.indexOf(keyword_) > -1){
|
|
|
|
|
data_.push(data[i]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
makeContAndShow(data_);
|
|
|
|
|
}else if(url != null && url != ""){//ajax<61><78><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
|
|
|
|
$.post(url,{keyword:keyword_},function(result){
|
|
|
|
|
makeContAndShow(result.data)
|
|
|
|
|
},"json")
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
bigAutocomplete.holdText = $this.val();
|
|
|
|
|
}
|
|
|
|
|
//<2F>س<EFBFBD><D8B3><EFBFBD>
|
|
|
|
|
if(k == 13){
|
|
|
|
|
var callback_ = $this.data("config").callback;
|
|
|
|
|
if($bigAutocompleteContent.css("display") != "none"){
|
|
|
|
|
if(callback_ && $.isFunction(callback_)){
|
|
|
|
|
callback_($bigAutocompleteContent.find(".ct").data("jsonData"));
|
|
|
|
|
}
|
|
|
|
|
$bigAutocompleteContent.hide();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//<2F><>װ<EFBFBD><D7B0><EFBFBD><EFBFBD><EFBFBD><EFBFBD>html<6D><6C><EFBFBD>ݲ<EFBFBD><DDB2><EFBFBD>ʾ
|
|
|
|
|
function makeContAndShow(data_){
|
|
|
|
|
if(data_ == null || data_.length <=0 ){
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var cont = "<table><tbody>";
|
|
|
|
|
for(var i=0;i<data_.length;i++){
|
|
|
|
|
cont += "<tr><td><div>" + data_[i].title + "</div></td></tr>"
|
|
|
|
|
}
|
|
|
|
|
cont += "</tbody></table>";
|
|
|
|
|
$bigAutocompleteContent.html(cont);
|
|
|
|
|
$bigAutocompleteContent.show();
|
|
|
|
|
|
|
|
|
|
//ÿ<><C3BF>tr<74><72><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ݣ<EFBFBD><DDA3><EFBFBD><EFBFBD>ظ<EFBFBD><D8B8>ص<EFBFBD><D8B5><EFBFBD><EFBFBD><EFBFBD>
|
|
|
|
|
$bigAutocompleteContent.find("tr").each(function(index){
|
|
|
|
|
$(this).data("jsonData",data_[index]);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//<2F><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>focus<75>¼<EFBFBD>
|
|
|
|
|
$this.focus(function(){
|
|
|
|
|
bigAutocomplete.currentInputText = $this;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
//<2F><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
|
|
|
|
this.hideAutocomplete = function(){
|
|
|
|
|
var $bigAutocompleteContent = $("#bigAutocompleteContent");
|
|
|
|
|
if($bigAutocompleteContent.css("display") != "none"){
|
|
|
|
|
$bigAutocompleteContent.find("tr").removeClass("ct");
|
|
|
|
|
$bigAutocompleteContent.hide();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$.fn.bigAutocomplete = bigAutocomplete.autocomplete;
|
|
|
|
|
|
|
|
|
|
})(jQuery)
|