Discussion :

[Rasta29]

Bonjour !


Je recherche un moyen d'insérer une liste déroulante du même principe que select, avec possibilité d'édition pour l'utilisateur.

Alors je parle d'édition mais attention ! Il y aurait l'auto-complétion d'une part, mais aussi un autre mécanisme :

Si on marque toto* la liste renverrai tous les éléments qui commencent par 'toto' et peu importe la suite, un peu comme sous UNIX.

Vous voyez à peu près de quoi je parle ?


Exemple:

J'ai cette liste ci-dessous.

facteur
pompier
pompiste
fonctionnaire
libraire
fleuriste

Si je tape dans le champs éditable pom* cela me renverrait pompier et pompiste.


J'ai essayé Datalist, ça marche très bien (avec fonction JS pour le traitement) sous Chrome, FF, Opéra mais pas IE9.


La contrainte principale étant le fonctionnement de l'application sous IE9, existe t-il un moyen semblable pour implémenter de ce genre de liste éditable ?



PS : si possible "groupé", c'est à dire sans insérer un champs puis une liste.


Merci, bonne journée !

[Bovino]

LMGTFY.

[Rasta29]

Merci pour l'info


Plus sérieusement, je n'ai pas trouvé de solution déjà existante (et pas pris le temps de vraiment creuser).

Alors je propose une solution un peu à l'arrache, mais pour cette problématique cela me convient.

N'hésitez pas à commenter/critiquer pour l'améliorer et pour que cela serve aux futurs sceptiques.


Voici le code HTML :

Code :

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

1
2
3
4
5
6
7
8
9
<input type="text" list="device" name="device" id="device_choice" onchange="checkDeviceName();">
	<datalist id="device">
	<!--[if lte IE 9]><select id="device_ie"><!--<![endif]-->
	<option value="&lt;Any&gt;">&lt;Any&gt;</option>
	        <?php foreach ($device_list as $device): ?>
		         <option value="<?php echo $device['device']; ?>"><?php echo $device['device']; ?></option>
	        <?php endforeach; ?>
	<!--[if lte IE 9]></select><!--<![endif]-->
</datalist>

Si le naviguateur est IE avec une version inférieure ou égale à 9, la balise "select" sera ajoutée.


Fonctions javascript qui vont avec :

Code javascript :

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
// Récupère le contenu de l'entrée (champs texte) éditable ainsi que les différents éléments de la liste (en fonction du navigateur).
// Puis la fonction récupère le premier mot dit 'utile' dans l'expression entrée par l'utilisateur.
// La fonction compare ce mot avec les éléments de la liste, si c'est existant, l'élément en question sera renvoyé.
// Sinon, la recherche des éléments intégrant la chaîne de caractère est lancée, puis retourne tous les éléments en rapport avec l'expression.
function checkDeviceName() {
	var expression = $("#device_choice").val().toLowerCase();
 
	var j=0, i=0, n=0;
	var word = '';
	var tab = new Array();
	var tab2 = new Array();
	var tab3 = new Array();
 
	var browser = get_browser();
	var version = get_browser_version();
 
 
	if(browser == "MSIE" && version < 10) {
		var liste = document.getElementById("device_ie").innerHTML.toLowerCase();
		tab = multisplit(liste,['/option>','<option value=','<','>'])
	}
	else {
		var liste = document.getElementById("device").innerHTML.toLowerCase();
		tab = liste.split('"');
	}
 
	var exist = liste.indexOf(expression);
 
	if(exist == -1) {
		var tab_exp = expression.split('*');
		while(word == '') {
			if(tab_exp[n] != '') {
				word = tab_exp[n];
			}
			n++;
		}
		for(i=0; i<tab.length; i++) {
 
			if(tab[i].indexOf(word) != -1) {
				tab2[j] = tab[i];
				j++;
			}
		}
		j=0;
		for(i=0; i<tab2.length; i++) {
			if((i%2)==0) {
				tab3[j] = tab2[i];
				j++;
			}
		}
		document.getElementById("device_choice").value = tab3;
	}
}
 
//Renvoie le nom du navigateur
function get_browser() {
    var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; 
    if(/trident/i.test(M[1])){
        tem=/\brv[ :]+(\d+)/g.exec(ua) || []; 
        return 'IE '+(tem[1]||'');
        }   
    if(M[1]==='Chrome'){
        tem=ua.match(/\bOPR\/(\d+)/)
        if(tem!=null)   {return 'Opera '+tem[1];}
        }   
    M=M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem=ua.match(/version\/(\d+)/i))!=null) {M.splice(1,1,tem[1]);}
    return M[0];
}
 
 
// Renvoie la version du navigateur
function get_browser_version() {
    var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];                                                                                                                         
    if(/trident/i.test(M[1])){
        tem=/\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+(tem[1]||'');
        }
    if(M[1]==='Chrome'){
        tem=ua.match(/\bOPR\/(\d+)/)
        if(tem!=null)   {return 'Opera '+tem[1];}
        }   
    M=M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem=ua.match(/version\/(\d+)/i))!=null) {M.splice(1,1,tem[1]);}
    return M[1];
}
 
// Renvoie un tableau des éléments récupérés suite au 'split' de la chaine d'entrée avec tous les délimiteurs renseignés en entrée
function multisplit(str,delimeters) {
    var result = [str];
    if (typeof(delimeters) == 'string')
        delimeters = [delimeters];
    while(delimeters.length>0){
        for(var i = 0;i<result.length;i++){
            var tempSplit = result[i].split(delimeters[0]);
            result = result.slice(0,i).concat(tempSplit).concat(result.slice(i+1));
        }
        delimeters.shift();
    }
    return result;
}

Voilà voila.