Filtrer une liste en pur javascript et sans jQuery

Classé dans javascript

Voici un nouveau script dans la veine du précédent.

Et oui, chez moi c'est le jeudi où c'est cadeau (comprenne qui pourra ).

Lisez bien les commentaires pour que la structure html soit conforme.

Il n'y a rien de plus à faire que d'appeler le fichier contenant le script en fin de page. Normalement, ça fonctionne sur une majorité de navigateurs, ie 8 compris.

/*
# ------------------ BEGIN LICENSE BLOCK ------------------
#
# This file is part of SIGesTH
#
# Copyright (c) 2009 - 2014 Cyril MAGUIRE, (!Pragmagiciels)
# Licensed under the CeCILL v2.1 license.
# See http://www.cecill.info/licences.fr.html
#
# ------------------- END LICENSE BLOCK -------------------
*/
/*
HTML Structure
<label for="">Filtrer</label>
<input id="inputFilterForwhatYouWantHere" name="inputName" type="text" placeholder="Find in the list" />
<ul id="filterForWhatYouChooseForInputAbove" class="filter">
<li><a>First element</a></li>
</ul>
*/
;(function(window,undefined){

    'use_strict';

    var keyCode = 0;
    var isIE = isBrowserIE();
    function isBrowserIE() {
        var nav = navigator.userAgent.toLowerCase();
        return (nav.indexOf('msie') != -1) ? parseInt(nav.split('msie')[1]) : false;
    }
    
    // from http://www.javascripter.net/faq/onkeydown.htm
    function fromKeyCode (n) {
        if( 47<=n && n<=90 ) return unescape('%'+(n).toString(16))
        if( 96<=n && n<=105) return 'NUM '+(n-96)
        if(112<=n && n<=135) return 'F'+(n-111)
        switch (n) {
            case (3): return 'Cancel' //DOM_VK_CANCEL
            case (6): return 'Help'   //DOM_VK_HELP
            case (8): return 'Backspace'
            case (9): return 'Tab'
            case (12): return 'NUM 5'  //DOM_VK_CLEAR
            case (13): return 'Enter'
            case (16): return 'Shift'
            case (17): return 'Ctrl'
            case (18): return 'Alt'
            case (19): return 'Pause|Break'
            case (20): return 'CapsLock'
            case (27): return 'Esc'
            case (32): return 'Space'
            case (33): return 'PageUp'
            case (34): return 'PageDown'
            case (35): return 'End'
            case (36): return 'Home'
            case (37): return 'Left Arrow'
            case (38): return 'Up Arrow'
            case (39): return 'Right Arrow'
            case (40): return 'Down Arrow'
            case (42): return '*' //Opera
            case (43): return '+' //Opera
            case (44): return 'PrntScrn'
            case (45): return 'Insert'
            case (46): return 'Delete'

            case (91): return 'WIN Start'
            case (92): return 'WIN Start Right'
            case (93): return 'WIN Menu'
            case (106): return '*'
            case (107): return '+'
            case (108): return 'Separator' //DOM_VK_SEPARATOR
            case (109): return '-'
            case (110): return '.'
            case (111): return '/'
            case (144): return 'NumLock'
            case (145): return 'ScrollLock'

            //Media buttons (Inspiron laptops) 
            case (173): return 'Media Mute On|Off'
            case (174): return 'Media Volume Down'
            case (175): return 'Media Volume Up'
            case (176): return 'Media >>'
            case (177): return 'Media <<'
            case (178): return 'Media Stop'
            case (179): return 'Media Pause|Resume'

            case (182): return 'WIN My Computer'
            case (183): return 'WIN Calculator'
            case (186): return '; :'
            case (187): return '= +'
            case (188): return ', <'
            case (189): return '- _'
            case (190): return '. >'
            case (191): return '/ ?'
            case (192): return '\` ~'
            case (219): return '[ {'
            case (220): return '\\ |'
            case (221): return '] }'
            case (222): return '\' "'
            case (224): return 'META|Command'
            case (229): return 'WIN IME'

            case (255): return 'Device-specific' //Dell Home button (Inspiron laptops)

        }
        return null
    }

    function arrayCompare(a1, a2) {
        if (a1.length != a2.length) return false;
        var length = a2.length;
        for (var i = 0; i < length; i++) {
            if (a1[i] !== a2[i]) return false;
        }
        return true;
    }
    function inArray(needle, haystack) {
        var length = haystack.length;
        for(var i = 0; i < length; i++) {
            if(typeof haystack[i] == 'object') {
                if(arrayCompare(haystack[i], needle)) return true;
            } else {
                if(haystack[i] == needle) return true;
            }
        }
        return false;
    }

    var object = {
        init: function() {
            var input = document.getElementsByTagName('input');
            for (var i = 0, c = input.length; i < c; i++) {
                this.addEventListener(input[i],"keypress", this);
this.addEventListener(input[i],"keydown", this); }; }, field:'', idPressed: '', fieldVal: '', addEventListener: function(el, eventName, handler) { if (el.addEventListener) { el.addEventListener(eventName, handler, false); } else { el.attachEvent('on' + eventName, object.handleEvent); } }, handleEvent: function(e) { var obj = Object; var evt = e ? e:event; var chrTyped, chrCode = 0; if (evt.charCode!=null) chrCode = evt.charCode; else if (evt.which!=null) chrCode = evt.which; else if (evt.keyCode!=null) chrCode = evt.keyCode; if (chrCode==0) chrTyped = 'SPECIAL KEY'; else chrTyped = String.fromCharCode(chrCode); if (evt.keyCode==8) chrTyped = 'Backspace'; if (isIE) { obj = object; } else { obj = this; } obj.field = evt.target || evt.srcElement; obj.idPressed = obj.field.getAttribute('id'); obj.fieldVal = obj.field.value; if (chrTyped != 'SPECIAL KEY') { obj.action(chrTyped); } }, action: function(a) { var obj = Object; if (isIE) { obj = object; } else { obj = this; } var id = obj.idPressed; if (id == null) return true; var val = obj.fieldVal; var idList = id.substring(14,id.length); //we remove "inputFilterFor" from input id var list = document.getElementById('filterFor'+idList); //to find list associated with input if (list == null) return true; var listItem = list.getElementsByTagName('li'); if (listItem == null) return true; var span = null; //text filled in input form if (a != 'Backspace') { //we add key because input value is filled after key is up val += a; } else { val = val.substring(0, val.length-1);//we remove last char because input value is updated after key is up } // if empty, all the list is display if(val == ''){ for(var i =0, count = listItem.length; i < count; i++) { listItem[i].style.display = 'list-item'; } return true; } // regex build from what is filled in form : (.*)e(.*)x(.*)e(.*)m(.*)p(.*)l(.*)e(.*) var regexp = '\\b(.*)'; for(var i =0, count = val.length; i < count; i++){ if (inArray(val[i],['.','?','*','+','/'])) {regexp += '(\\'+val[i]+')(.*)';} else if (val[i] != '') {regexp += '('+val[i]+')(.*)';} } regexp += '\\b'; // for each item of the list for(var i =0, count = listItem.length; i < count; i++) { listItem[i].style.display = 'list-item'; // we looking for span tag wrapped by link tag var links = listItem[i].getElementsByTagName('a'); for (var k = 0, c= links.length; k < c; k++) { var span = links[k].getElementsByTagName('span'); } // we take the first one if (span[0] != undefined) { span = span[0]; if(span.innerHTML.match(new RegExp(regexp,'i'))) { listItem[i].style.display = 'list-item'; } else { listItem[i].style.display = 'none'; } } } return true; } }; // Init object.init(); })(window);

Vous pouvez voir le script en action sur ma page de téléchargement. Plusieurs listes peuvent être filtrées, indépendamment sur la même page.

Enjoy !

1 commentaire

  1. Très bien le rendu, j'aime bien

Écrire un commentaire

*


*

 Se rappeler de moi sur ce site

*
Quelle est la première lettre du mot tatca ? :