Plugin Jquery autocompletion infini endlesscombo0.9

Soyez le premier à donner votre avis sur cette source.

Vue 2 538 fois - Téléchargée 418 fois

Description


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);

Codes Sources

A voir également

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.