tri dynamique sur une Listarea

Version imprimable

Bonjour,

J'ai une listarea (voir ci-dessous) qui contient un tas d'information. Est-ce possible de faire un tri dynamique? en faite je souhaiterai que lorsqu'un utilisateur tape par exemple "ZAC", que tout ce qui commence par "ZAC" s'affiche dans la listarea.
Code:

1 2 3 4 <select onchange="Aff();" name="Slast_name" class="Style49" id="Slast_name"> <option>Cliquez la personne que vous souhaitez contacter.</option> <option value="AAMODT">AAMODT Astrid</option> <option value="ABRAHAM">ABRAHAM Sylvie</option>
Merci bcp pour votre aide.

Bonne journée.

25/04/2007, 14h07
E.Bzz

Citation:

Envoyé par ZACKX

lorsqu'un utilisateur tape par exemple "ZAC", que tout ce qui commence par "ZAC" s'affiche dans la listarea.

Si tu veux ne voir que ça, c'est pas un tri, mais une mise à jour (=> Ajax).

Sinon, c'est déjà le cas, mais sur le 1° caractère ...
25/04/2007, 14h35
ZACKX

Ha ok je ne savais pas. Et comment dois-je faire svp?
25/04/2007, 14h40
E.Bzz

Citation:

Envoyé par ZACKX

Ha ok je ne savais pas. Et comment dois-je faire svp?

Heu ... ben tu cliques sur ta liste et tu tappes sur la touche "Z" de ton clavier (pour "ZAC") :mrgreen:
25/04/2007, 14h55
ZACKX

LOl ou ca je sais :o)

Ce ke je veux c plutot tu tape ZA et tu as tout ce ki commence par ZA.

Avec ton principe, Tu tapes Z il te sort les Z mais si tu tapes A ensuite, c les A qui viennent.

un exemple ...
sur le select directement ce n'est pas possible, ce n'est possible que pour la première lettre ...

Code:

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
<script type="text/javascript">
function position()
{ for (var n=0;n<pays.length;n++)
      { if (pays[n].text.toLowerCase()>=rech.value.toLowerCase())
           { pays.selectedIndex=n;
              n=pays.length;  }  }  }
 
function sel(){
pays.selectedIndex=13;
alert(pays.itemNumber)
}             
</script>
</head>
<body>
<div z-index="3" style="position:absolute">
<select name=pays onmouseover="this.size=10" onmouseout="this.size=0">
   <option value="Afghanistan">Afghanistan</option>
        <option value="Afrique du Sud">Afrique du Sud</option>
        <option value="Albanie">Albanie</option>
        <option value="Algerie">Algerie</option>
        <option value="Allemagne">Allemagne</option>
        <option value="Andorre">Andorre</option>
        <option value="Angola">Angola</option>
        <option value="Anguilla">Anguilla</option>
        <option value="Antarctique">Antarctique</option>
        <option value="Antigua et Barbuda">Antigua et Barbuda</option>
        <option value="Antilles neerlandaises">Antilles neerlandaises</option>
        <option value="Arabie Saoudite">Arabie Saoudite</option>
        // ..... / .....
        <option value="Zambie">Zambie</option>
        <option value="Zimbabwe">Zimbabwe</option>
</select>
</div>
<br/>
<br/>
Rechercher : <input type="text" name=rech onkeyup="position();"><br/>
<input type="button" value="selectionner" onclick="sel()" />

de mémoire merci à javatwister pour ce code (sur qu'il va encore dire qu'il y est pour rien ...^^)

25/04/2007, 15h03
E.Bzz

Citation:

Envoyé par ZACKX

Avec ton principe, Tu tapes Z il te sort les Z mais si tu tapes A ensuite, c les A qui viennent.

Et oui !
Les nav sont mal faits, hein ? :lol:

A mon avis, tu as plus vite fait d'alimenter ta liste avec le résultat (3 lettres saisies dans un input) avec un petit script Ajax.

Parce que sinon :
1) si tu te poses la question, ça veut dire que la liste est longue => plein de données rapatriées pour rien
2) même en sélectionnant la bonne ligne, pas sûr qu'elle appraraisse => scroll à gérer, et tout ça pour pas forcément un résultat satisfaisant

Ajax !!
25/04/2007, 15h11
SpaceFrog

Bon ben je vais allez biner des patates alors ?
25/04/2007, 15h18
E.Bzz

Citation:

Envoyé par SpaceFrog

Bon ben je vais allez biner des patates alors ?

Oups : désolé SpaceFrog : j'ai zappé la remarque que j'avais commencé à te faire :oops:

En gros : ton script (enfin de JavaTwister) m'étonne, puisque c'est le comportement d'un select ... sans script :D

Sous IE en tous cas, ce qui est loin d'en faire une règle ...
25/04/2007, 15h30
SpaceFrog

Non Bzz sans le script il ne prend en compte que la première lettre ...

Super merci messieurs pour votre aide, ca marche bien. J'ai adapter le code afin que ca tourne avec mon code et voila ce que ca donne:

Dans HEAD

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
function position()
{ for (var n=0;n<Slast_name.length;n++)
      { if (Slast_name[n].text.toLowerCase()>=rech.value.toLowerCase())
           { Slast_name.selectedIndex=n;
              n=Slast_name.length;  }  }  }
 
function sel(){
Slast_name.selectedIndex=13;
alert(Slast_name.itemNumber)
}             
</script>

Code:

1
2
3
4
5
<select onchange="Aff();" name="Slast_name" class="Style49" id="Slast_name" onmouseout="this.size=0">
 <option value="AAMODT">AAMODT Astrid</option>
<option value="ABRAHAM">ABRAHAM Sylvie</option>
<option value="FOREST">FOREST David</option>
       </select>

Code:

1
2
3
<div id="Layer12" style="position:absolute; width:44px; height:26px; z-index:20; left: 361px; top: 343px;">
    <input type="text" class="Style49" style="background-color:#E9E9E9" value="" size="5" name=rech onKeyUp="position();">
</div>

Encore merci pour votre aide z'etes vraiment cool.

25/04/2007, 16h01
E.Bzz

Citation:

Envoyé par SpaceFrog

Non Bzz sans le script il ne prend en compte que la première lettre ...

Alors désolé, j'avais mal compris ton post initial :aie: