Recherche dans une liste select sans rechargement

Version imprimable

09/03/2009, 11h51
Guillemot

Recherche dans une liste select sans rechargement

Bonjour à tous et félicitation pour le site et le forum.

Je voudrais ajouter sur mon site une liste (select) contenant l'ensemble des sujets. Vu qu'il y en a beaucoup, je veut ajouter un input texte au dessus. L'idée est que le la liste select se met à jour au fur et à mesure que le visiteur tappe des caractère dans le champs texte. ainsi, si je tappe 'asa' dans mon champs texte, la liste select affichera tout les sujets qui contienne Asa.
L'ensemble du traitement doit se faire par le navigateur du visiteur (pas d'ajax), je suis donc en pur DHTML.

Je sais que cette technique existe car il y a quelques années, j'étais tombé sur une bibliothèque DHTML avec plusieurs effets tout fait (des menus déroulants et tout un ensemble de widget de formulaire). Mais j'ai été incapable de retrouver cette librairie, je ne tombe que sur des frameworks ajax alors que les cherche des widget javascript/DHTML.

Mes questions sont les suivantes :
- Connaissez-vous un widget qui fasse ce que je veux ?
- Connaissez-vous les bon termes pour ce que je cherche ? (et qui donnerais des résultats dans un moteur de recherche) ?
- Savez-vous où je peux trouver une liste de bibliothèques DHTML/JS qui ont un ensemble de widgets/fonctionnalités (pas des frameworks ajax) ?

merci d'avance,
G.
10/03/2009, 00h49
emmanuel.remy

recherche avec: javascript filtering select

par ex: http://www.barelyfitz.com/projects/filterlist/

Merci beaucoup pour ta réponse.

Ca marche sans problème, et on peut tout à fait utiliser le script proposé en javascript non intrusif.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//Chargement de la classe de filtrage : (avec id du select à selact)
 
var filtreacteur;
//Chargement des fonctions de filtrage des listes
var lst_acteur=document.getElementById('selact'); 
filtreacteur = new filterlist(lst_acteur);
//insensible à la casse
filtreacteur.set_ignore_case(true);
 
//Création d'un input texte au dessus de la liste : 
var txt_acteur=document.createElement('input');
txt_acteur.setAttribute('name','act');
txt_acteur.setAttribute('id','act');
txt_acteur.setAttribute('type','text');
txt_acteur.onkeyup = function () { filtreacteur.set(this.value) }
var retl=document.createElement('br');
lst_acteur.parentNode.insertBefore(retl, lst_acteur);
lst_acteur.parentNode.insertBefore(txt_acteur, retl);