le script transforme une zone de texte en liste combo avec ou sans autocompletion avec défilement infini
//endlesscombo 0.9
//transforme une zone de texte en liste combo avec ou sans autocompletion avec défilement infini
//Usage
//--- $(target).endlesscombo({source:function(query,page){..Do somthing.. return data}})
//
//Option
//--- source (query, page): function avec 2 parametres.doit retorner un tableau de donnée à une dimension
//
//Méthodes publiques : $(target).data('endlesscombo').[methodename]
//--- open(): affiche la liste d'option. retourne l'objet jquery
//--- close(): masque mla liste d'option. retourne l'objet jquery
//--- setting(): retourne les parametres du plugin objet json
//--- setting('default'): restaure les parametres par défaut.retourne l'objey jquery
//--- setting(newsetting): étent les parametres en cours avec les nouveaux parametres.retourne.l'objet jquery
//--- state: renvoie 'open' si la liste ets affichée / 'close' si elle est masquée
//
//TODO gestion des erreurs
//target doit être input[text]
//source doit être une fonction
//source doit renvoyer un tableau à une dimension
//ajout d'évenements personalisée exemple : onselect
(function($){
var endlesscomboPlugin = function(element, params)
{
//
var defaults = {source:function(query,page){return new Array()}};
var d=defaults;
var params = $.extend(defaults, params || {});
//initialisation des variables
var $$ = $(element); //stock l'objet jquery de l'element cible
var $dropdownlist=$('<ul class="dropdownlist-combo" ></ul>').appendTo('body').hide(); //stock l'objet jquery de la liste de choix
var val=$$.val(); //stock la valeur actuelle;
//initialisation des drapeaux
var enablemouseover=true;
var enableblur=true;
//initialise la liste de choix
var currentpage=1;
dropdownlist_Populate(params.source($$.val(),currentpage));
function dropdownlist_Populate(data){ //fonction d'alimentation de la liste de choix
var r='';
$.each( data, function( key, value ) {
r=r+'<li class="option-combo">'+ value+'</li>';
});
$dropdownlist.html(r);
}
function dropdownlist_Append(data){
var r='';
$.each( data, function( key, value ) {
r=r+'<li class="option-combo">'+ value+'</li>';
});
$dropdownlist.append(r);
}
function dropdownlist_Expand(){
var top=$$.offset().top + $$.outerHeight();
var left=$$.offset().left;
var width=$$.outerWidth();//TODO var width=$$.outerWidth()-largeur bordure liste de choix
$dropdownlist.offset({top:top,left:left});
$dropdownlist.css({"min-width": width,"top":top,"left":left}); $dropdownlist.show();
$$.focus();
}
function dropdownlist_Collapse(){$dropdownlist.hide()}
function option_Select(option){
if (option==''){option=$$.val()}
$$.val(option);
val=option;
$dropdownlist.scrollTop(0);
dropdownlist_Collapse();
//met à jour la liste de choix
currentpage=1;
dropdownlist_Populate(params.source($$.val(),currentpage));
}
//gestionnaire d'évenement'
$$.bind('input.endlesscombo',function(){
if($dropdownlist.is(':hidden')){dropdownlist_Expand();}
currentpage=1;
dropdownlist_Populate(params.source($$.val(),currentpage));
$dropdownlist.scrollTop(0);
});
$dropdownlist.bind('scroll.endlesscombo',function(){
if($dropdownlist.scrollTop()==$dropdownlist.prop('scrollHeight')-$dropdownlist.height()){
currentpage=currentpage+1;
dropdownlist_Append(params.source($$.val(),currentpage));
};
})
$$.bind('click.endlesscombo',function(){
if($dropdownlist.is(':hidden')){dropdownlist_Expand();}
else {dropdownlist_Collapse();}
});
$$.bind('keydown.endlesscombo',function(event){ //evenement touche clavier
switch(event.keyCode) {
case 38: // touche haut
if($dropdownlist.is(':hidden')){dropdownlist_Expand();}
else{
i=$dropdownlist.children().not(':hidden').index($dropdownlist.children('.highlited-combo').removeClass('highlited-combo'));
$($dropdownlist.children().not(':hidden')[i-1]).addClass('highlited-combo');
if (i>1){
var delta=$dropdownlist.children('.highlited-combo').position().top;
if(delta<0){
enablemouseover=false;
$dropdownlist.scrollTop(delta+$dropdownlist.scrollTop())
}}
}
//event.preventDefault();
break;
case 40: // touche bas
if($dropdownlist.is(":hidden")){dropdownlist_Expand();}
else{
max=$($dropdownlist.children().not(':hidden')).length-1;
i=$dropdownlist.children().not(':hidden').index($dropdownlist.children('.highlited-combo').removeClass('highlited-combo'));
$($dropdownlist.children().not(':hidden')[((i>=max)?i:i+1)]).addClass('highlited-combo');
var bottom=$dropdownlist.children('.highlited-combo').position().top+$dropdownlist.children('.highlited-combo').height();
var delta=bottom-$dropdownlist.height();
if(delta>0){
enablemouseover=false;
$dropdownlist.scrollTop(delta+$dropdownlist.scrollTop())
}
}
//event.preventDefault();
break;
case 27: //touche échape
option_Select(val);
event.preventDefault();
break;
case 9: //touche tab
option_Select($dropdownlist.children('.highlited-combo').text());
break;
case 13://touche entrée
if($dropdownlist.is(":hidden")){dropdownlist_Expand();}
else{option_Select($dropdownlist.children('.highlited-combo').text());}
//event.preventDefault();
break;
default:
break;
}
});
$$.bind('blur.endlesscombo',function(){if(enableblur){dropdownlist_Collapse()}});// évenement perte de focus : ferme la liste de choix si le gestionnaire est actif
$dropdownlist.on('mousedown.endlesscombo','li',function(){enableblur=false;}); //evenement "mousedown" sur une option :désavtive le gestionnaire de l'event "blur" , previent la fermeture de la liste avant l'event click
$dropdownlist.on('click.endlesscombo','li',function(){$$.focus();option_Select($(this).text());}); // evenement "click" sur une option :met le focus sur la endlesscombo, option_Selectionne l'option
$$.bind('focus.endlesscombo',function(){enableblur=true;}) //evenement foccus :réactive le gestionnaire de l'evnt "blur" après réception du focus
//évenements survol de la souris
$dropdownlist.on('mouseout.endlesscombo','li',function(){$(this).removeClass('highlited-combo');}); // supprime la surbrillance
$dropdownlist.on('mouseover.endlesscombo','li',function(){
if (enablemouseover){
//$dropdownlist.children('.highlited-combo').removeClass('highlited-combo')
$(this).addClass('highlited-combo');// met l'option en surbrillance
}
else{enablemouseover=true}//réactive le gestionnaire
});
// Membres publiques
this.setting = function(newparams){
if (newparams){
params=$.extend(params, newparams || {});
//réinitialise la liste de choix
currentpage=1;
dropdownlist_Populate(params.source($$.val(),currentpage));
return $$; //renvoie l'objet jquery
}
else {return params;} //renvoie les paramètres en cours
};
this.open=function() {dropdownlist_Expand();return $$};
this.close=function(){dropdownlist_Collapse();return $$};
this.state=function(){return(($dropdownlist.is(':hidden'))?'close':'open')};
this.destroy=function(){
$$.unbind('.endlesscombo');
$$.off('.endlesscombo');
$dropdownlist.remove();
$$.removeData('endlesscombo');
return $$};
};
$.fn.endlesscombo = function(params)
{
return this.each(function()
{
var $$ = $(this);
if ($$.data('endlesscombo')) return;
var endlesscombo = new endlesscomboPlugin(this, params);
$$.data('endlesscombo', endlesscombo);
});
};
})(jQuery);
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.