Discussion :

[medkarim]

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

[medkarim]

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

toutes proposition ou correction est la bienvenues. merci

[medkarim]

Correction bug de positionnement.

[medkarim]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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