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