Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 4 sur 4
  1. #1
    Membre actif

    Inscrit en
    mai 2005
    Messages
    124
    Détails du profil
    Informations forums :
    Inscription : mai 2005
    Messages : 124
    Points : 181
    Points
    181

    Par défaut plugin jquery : liste modifiable (combo) autocompletée

    Titre: liste modifiable (combo) autocompletée
    Description :Affiche une liste d'options et autocomplete un champ de saisie (input) afin de permettre de trouver et sélectionner une valeur
    tester sur FF 7.0.1, google chome 14.0.8 et EI 9.0.8 (semble fonctionner correctement mais..)
    Images attachées Images attachées
    Fichiers attachés Fichiers attachés

  2. #2
    Membre actif

    Inscrit en
    mai 2005
    Messages
    124
    Détails du profil
    Informations forums :
    Inscription : mai 2005
    Messages : 124
    Points : 181
    Points
    181

    Par défaut mise à jour de la source

    svp signalez moi si vous avez tester d'eventuels bugs.

    toutes proposition ou correction est la bienvenues. merci
    Fichiers attachés Fichiers attachés

  3. #3
    Membre actif

    Inscrit en
    mai 2005
    Messages
    124
    Détails du profil
    Informations forums :
    Inscription : mai 2005
    Messages : 124
    Points : 181
    Points
    181

    Par défaut [MAJ]Combo autocompletée

    Correction bug de positionnement.
    Fichiers attachés Fichiers attachés

  4. #4
    Membre actif

    Inscrit en
    mai 2005
    Messages
    124
    Détails du profil
    Informations forums :
    Inscription : mai 2005
    Messages : 124
    Points : 181
    Points
    181

    Par défaut combobox avec ou sans autocompetion autosuggestion version 2.0

    voici la version 2.0 de mon plugin jquery combobox 165 lignes de code seulement

    tester avec jquery v2.0.1 sur chrome31.0 FF 26.0 (sur IE 11.0 ne fonctionne pas correctement pour l'instant)


    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    //combo 2.0
    //transforme une zone de texte en liste combo avec ou sans autocompletion
    //usage 
    //   $(target).combo()
    //   $(target).combo(data,autocomplete,selectfirst)
    //option
    //data : tableau de donnée valeur par defaut tableau vide
    //autocomplete:
    //  'none'(pas d'autocompletion),
    //  'begin' (commence avec l'expression exacte),
    //  'anywher'(expression exact n'importe où),
    //  'keywords'(contient au moins un mot clé),
    //  'keywordsall' (contient tout les mots clé) valeur par defaut
    //selectfirst: booléen (met en surbrillance le premier élement de la liste). valeur par defaut false 
     
    (function($){
    	$.fn.combo = function(args) {
    		var defaults = {data: new Array, autocomplete:'keywordsall',selectfirst:false};
            var args=$.extend(defaults, args);
            var data=args.data;
            this.each(function() {
            	var $$=$(this);
            	var $CurrentOption=null;
            	var	$dropdownlist=$('<ul class="dropdownlist-combo" ></ul>').appendTo('body').hide();
            	var enablemouseover=true;
     
      			//positionner dropdownlist 
      			var top=$$.offset().top + $$.outerHeight();
                var left=$$.offset().left;
                var width=$$.outerWidth();
                $dropdownlist.offset({top:top,left:left});
                $dropdownlist.css({"min-width": width});
     
                //populer dropdownlist options
                var r='';
                $.each( data, function( key, value ) {
                  r=r+'<li class="option-combo">'+ value+'</li>';
                });
                $dropdownlist.append(r);
     
     
                //gestion évenement combo
                $$.bind('input',function(){filter()});
                $$.blur(function(){$dropdownlist.hide()}); 
                $$.click(function(){
     
                	if($dropdownlist.is(':hidden')){filter();}
    				else {$dropdownlist.hide();}		
    			});
                $$.keydown(function(event){
    				switch(event.keyCode) {
    					case 38: // touche haut
    						if($dropdownlist.is(':hidden')){filter;}
    						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())
    							}}							
    						}
    						break;
    					case 40: // touche bas
    						if($dropdownlist.is(":hidden")){filter;}
    						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())
    							}
    						}
    						break;
    					case 27: //touche échape				
    						$dropdownlist.hide()  //ferme la liste
    						break;	
    					case 9: //touche tab
    						select($dropdownlist.children('.highlited-combo'));
    						break;		
    					case 13://touche entrée
    						if($dropdownlist.is(":hidden")){filter;} 
    						else{select($dropdownlist.children('.highlited-combo'));}
    						break;			
    					default:
    						break;
    				}
                });
     
     
                //gestion des évenements dropdownlist
                $dropdownlist.focus(function(){$$.focus();filter});
                $($dropdownlist.children()).mousedown(function(){select($(this));})
                $($dropdownlist.children()).mouseout(function(){$(this).removeClass('highlited-combo');})
                $($dropdownlist.children()).mouseover(function(){
                	if (enablemouseover){
                		$dropdownlist.children('.highlited-combo').removeClass('highlited-combo')
                		$(this).addClass('highlited-combo');
                	}
                	else{enablemouseover=true}
                })
     
     
                //filtrer les options en fonction de la saisie
                function filter(){
                	$dropdownlist.show();
                	// supprime les espaces superflus, echape les caracteres speciaux
                	var filter=$.trim($$.val()).replace(/\s+/ig, ' ').replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
                	$($dropdownlist.children()).filter(':hidden').show();	//reafiche les options masquées
                	if (filter!=''){
                    switch (args.autocomplete){		
                    	case 'none': 
                    		break;			
    					case 'begin':
    						var regex=new RegExp('^'+$$.val(),'ig') ;
    						$($dropdownlist.children()).filter(function(){return !$(this).text().match(regex)}).hide();
    						break;
    					case 'any':
    						var regex=new RegExp($$.val(),'ig') ;
    						$($dropdownlist.children()).filter(function(){return !$(this).text().match(regex)}).hide();
    						break;
    					case 'keywords':
    						var token=jQuery.unique(filter.toLowerCase().split(' '));
                			var regex=new RegExp(token.join('|'),'g');
                			$($dropdownlist.children()).filter(function(){return !$(this).text().match(regex)}).hide();
    						break;
    					case 'keywordsall': default:
    						var token=jQuery.unique(filter.toLowerCase().split(' '));
                			var regex=new RegExp(token.join('|'),'g');
                			$($dropdownlist.children()).filter(function(){
    		            		var match=$(this).text().toLowerCase().match(regex);
    		            		if ((match !== undefined) && (match !== null))
    		            			{return $.unique(match).length!=token.length;}
    		            		else
    		            			{return true;}
    		            	}).hide(); // masque les options 
    						break;
    				}}
     
    				if($($dropdownlist.children().not(':hidden')).length==0){$dropdownlist.hide()};
    				$dropdownlist.children('.highlited-combo').removeClass('highlited-combo')
     
                	if (args.selectfirst){
                		$($dropdownlist.children().not(':hidden')[0]).addClass('highlited-combo');
                		enablemouseover=false;
                		$dropdownlist.scrollTop(0);
                	}
                }
     
      			//selctioner une option
      			function select($option){
      				var s=$option.text();
      				if (s!=''){	$$.val(s)};  				
      				filter();
      				$dropdownlist.hide();
      			}			
     
    		})
    	}
     
    })(jQuery);
    Fichiers attachés Fichiers attachés

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •