2 pièce(s) jointe(s)
	
	
		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..)
	 
	
	
		1 pièce(s) jointe(s)
	
	
		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:
	
| 12
 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); |