Filtrer une liste

Un petit bout de code html/css/javascript tout simple pour filtrer l'affichage des items d'une liste à partir d'une valeur tapée dans un champ. A étendre pour appliquer à des besoins plus sépcifiques.

<p><input type="text" id="myfilter"></p>
<ul id="mylist">
    <li>item 1</li>
    <li>item 2</li>
    <!-- … -->
    <li>item n</li>
</ul>
Code HTML d'u champ de filtrage et de la liste à filtrer.
var 
// filter input element
filter = document.getElementById('myfilter'),
// li NodeList
lis = document.getElementById('mylist').getElementsByTagName('li'),
// NodeList size
n = lis.length,
// clear filter
clear = function () {
    for (var i = 0; i < n; i++) {
        lis[i].style.marginLeft = '0';
    }
},
// show lis where text content begins with 'val'
find = function (val) {
    for (var i = 0; i < n; i++) {
        if (lis[i].textContent.toLowerCase().indexOf(val.toLowerCase()) === 0) {
            lis[i].style.marginLeft = '0';
        } else {
            // negative margin to put li out of ul
            lis[i].style.marginLeft = '-650px';
        }
    }
};
// listen to key event on filter
filter.addEventListener('keyup', function (e) {
    var text = e.target.value;
    if (text=='') { clear(); }
    else { find(text); }
}, false);
Code javascript pour gérer le filtrage de la liste.
#mylist {
    overflow: hidden;
    margin: 0 0 10px;
}
#mylist > li {
    float: left;
    list-style-position: inside;
    margin: 0 10px 0 0;
    -webkit-transition: margin linear 0.5s;
       -moz-transition: margin linear 0.5s;
         -o-transition: margin linear 0.5s;
            transition: margin linear 0.5s;
}
Code CSS minimal pour gérer le filtrage de la liste.


  • Afghanistan
  • Afrique du Sud
  • Albanie
  • Algérie
  • Allemagne
  • Andorre
  • Angola
  • Antigua et Barbuda
  • Arabie saoudite
  • Argentine
  • Arménie
  • Australie
  • Autriche
  • Azerbaïdjan
  • Bahamas
  • Bahreïn
  • Bangladesh
  • Barbade
  • Biélorussie
  • Belgique
  • Belize
  • Bénin
  • Bhoutan
  • Birmanie
  • Bolivie
  • Bosnie-Herzégovine
  • Botswana
  • Brésil
  • Brunei
  • Bulgarie
  • Burkina
  • Faso
  • Burundi
  • Cambodge
  • Cameroun
  • Canada
  • Cap-Vert
  • République centrafricaine
  • Chili
  • Chine
  • Chypre
  • Colombie
  • Comores
  • République du Congo
  • Rép. dém. du Congo
  • Corée du Nord
  • Corée du Sud
  • Costa Rica
  • Côte d’Ivoire
  • Croatie
  • Cuba
  • Danemark
  • Djibouti
  • République dominicaine
  • Dominique
  • Égypte
  • Émirats arabes unis
  • Équateur
  • Érythrée
  • Espagne
  • Estonie
  • États-Unis
  • Éthiopie
  • Fidji
  • Finlande
  • France
  • Gabon
  • Gambie
  • Géorgie
  • Ghana
  • Grèce
  • Grenade
  • Guatemala
  • Guinée
  • Guinée-Bissau
  • Guinée équatoriale
  • Guyana
  • Haïti
  • Honduras
  • Hongrie
  • Inde
  • Indonésie
  • Irak
  • Iran
  • Irlande
  • Islande
  • Israël
  • Italie
  • Jamaïque
  • Japon
  • Jordanie
  • Kazakhstan
  • Kenya
  • Kirghizistan
  • Kiribati
  • Koweït
  • Laos
  • Lesotho
  • Lettonie
  • Liban
  • Liberia
  • Libye
  • Liechtenstein
  • Lituanie
  • Luxembourg
  • Macédoine
  • Madagascar
  • Malaisie
  • Malawi
  • Maldives
  • Mali
  • Malte
  • Maroc
  • Îles Marshall
  • Maurice
  • Mauritanie
  • Mexique
  • Micronésie
  • Moldavie
  • Monaco
  • Mongolie
  • Monténégro
  • Mozambique
  • Namibie
  • Nauru
  • Népal
  • Nicaragua
  • Niger
  • Nigeria
  • Norvège
  • Nouvelle-Zélande
  • Oman
  • Ouganda
  • Ouzbékistan
  • Pakistan
  • Palaos
  • Panamá
  • Papouasie Nouvelle-Guinée
  • Paraguay
  • Pays-Bas
  • Pérou
  • Philippines
  • Pologne
  • Portugal
  • Qatar
  • Russie
  • Salvador
  • Syrie
  • République tchèque
  • Tanzanie
  • Roumanie
  • Royaume-Uni
  • Rwanda
  • Sainte-Lucie
  • Saint-Christophe et Niévès
  • Saint-Marin
  • Saint-Vincent et les Grenadines
  • Salomon
  • Samoa
  • Sao Tomé et Principe
  • Sénégal
  • Serbie
  • Seychelles
  • Sierra Leone
  • Singapour
  • Slovaquie
  • Slovénie
  • Somalie
  • Soudan
  • Soudan du Sud
  • Sri Lanka
  • Suède
  • Suisse
  • Suriname
  • Swaziland
  • Tadjikistan
  • Tchad
  • Thaïlande
  • Timor oriental
  • Togo
  • Tonga
  • Trinité et Tobago
  • Tunisie
  • Turkménistan
  • Turquie
  • Tuvalu
  • Ukraine
  • Uruguay
  • Vanuatu
  • Venezuela
  • Viêt Nam
  • Yémen
  • Zambie
  • Zimbabwe
Exemple d'utilisation.