Filtrer une liste en pur javascript et sans jQuery - via Ecyseo

Mots-clés
|
  1. /*
  2. # ------------------ BEGIN LICENSE BLOCK ------------------
  3. #
  4. # This file is part of SIGesTH
  5. #
  6. # Copyright (c) 2009 - 2014 Cyril MAGUIRE, (!Pragmagiciels)
  7. # Licensed under the CeCILL v2.1 license.
  8. # See http://www.cecill.info/licences.fr.html
  9. #
  10. # ------------------- END LICENSE BLOCK -------------------
  11. */
  12. /*
  13. HTML Structure
  14. <label for="">Filtrer</label>
  15. <input id="inputFilterForwhatYouWantHere" name="inputName" type="text" placeholder="Find in the list" />
  16. <ul id="filterForWhatYouChooseForInputAbove" class="filter">
  17. <li><a>First element</a></li>
  18. </ul>
  19. */
  20. ;(function(window,undefined){
  21.  
  22.     'use_strict';
  23.  
  24.     var keyCode = 0;
  25.     var isIE = isBrowserIE();
  26.     function isBrowserIE() {
  27.         var nav = navigator.userAgent.toLowerCase();
  28.         return (nav.indexOf('msie') != -1) ? parseInt(nav.split('msie')[1]) : false;
  29.     }
  30.    
  31.     // from http://www.javascripter.net/faq/onkeydown.htm
  32.     function fromKeyCode (n) {
  33.         if( 47<=n && n<=90 ) return unescape('%'+(n).toString(16))
  34.         if( 96<=n && n<=105) return 'NUM '+(n-96)
  35.         if(112<=n && n<=135) return 'F'+(n-111)
  36.         switch (n) {
  37.             case (3): return 'Cancel' //DOM_VK_CANCEL
  38.             case (6): return 'Help'   //DOM_VK_HELP
  39.             case (8): return 'Backspace'
  40.             case (9): return 'Tab'
  41.             case (12): return 'NUM 5'  //DOM_VK_CLEAR
  42.             case (13): return 'Enter'
  43.             case (16): return 'Shift'
  44.             case (17): return 'Ctrl'
  45.             case (18): return 'Alt'
  46.             case (19): return 'Pause|Break'
  47.             case (20): return 'CapsLock'
  48.             case (27): return 'Esc'
  49.             case (32): return 'Space'
  50.             case (33): return 'PageUp'
  51.             case (34): return 'PageDown'
  52.             case (35): return 'End'
  53.             case (36): return 'Home'
  54.             case (37): return 'Left Arrow'
  55.             case (38): return 'Up Arrow'
  56.             case (39): return 'Right Arrow'
  57.             case (40): return 'Down Arrow'
  58.             case (42): return '*' //Opera
  59.             case (43): return '+' //Opera
  60.             case (44): return 'PrntScrn'
  61.             case (45): return 'Insert'
  62.             case (46): return 'Delete'
  63.  
  64.             case (91): return 'WIN Start'
  65.             case (92): return 'WIN Start Right'
  66.             case (93): return 'WIN Menu'
  67.             case (106): return '*'
  68.             case (107): return '+'
  69.             case (108): return 'Separator' //DOM_VK_SEPARATOR
  70.             case (109): return '-'
  71.             case (110): return '.'
  72.             case (111): return '/'
  73.             case (144): return 'NumLock'
  74.             case (145): return 'ScrollLock'
  75.  
  76.             //Media buttons (Inspiron laptops)
  77.             case (173): return 'Media Mute On|Off'
  78.             case (174): return 'Media Volume Down'
  79.             case (175): return 'Media Volume Up'
  80.             case (176): return 'Media >>'
  81.             case (177): return 'Media <<'
  82.             case (178): return 'Media Stop'
  83.             case (179): return 'Media Pause|Resume'
  84.  
  85.             case (182): return 'WIN My Computer'
  86.             case (183): return 'WIN Calculator'
  87.             case (186): return '; :'
  88.             case (187): return '= +'
  89.             case (188): return ', <'
  90.             case (189): return '- _'
  91.             case (190): return '. >'
  92.             case (191): return '/ ?'
  93.             case (192): return '\` ~'
  94.             case (219): return '[ {'
  95.             case (220): return '\\ |'
  96.             case (221): return '] }'
  97.             case (222): return '\' "'
  98.             case (224): return 'META|Command'
  99.             case (229): return 'WIN IME'
  100.  
  101.             case (255): return 'Device-specific' //Dell Home button (Inspiron laptops)
  102.  
  103.         }
  104.         return null
  105.     }
  106.  
  107.     function arrayCompare(a1, a2) {
  108.         if (a1.length != a2.length) return false;
  109.         var length = a2.length;
  110.         for (var i = 0; i < length; i++) {
  111.             if (a1[i] !== a2[i]) return false;
  112.         }
  113.         return true;
  114.     }
  115.     function inArray(needle, haystack) {
  116.         var length = haystack.length;
  117.         for(var i = 0; i < length; i++) {
  118.             if(typeof haystack[i] == 'object') {
  119.                 if(arrayCompare(haystack[i], needle)) return true;
  120.             } else {
  121.                 if(haystack[i] == needle) return true;
  122.             }
  123.         }
  124.         return false;
  125.     }
  126.  
  127.     var object = {
  128.         init: function() {
  129.             var input = document.getElementsByTagName('input');
  130.             for (var i = 0, c = input.length; i < c; i++) {
  131.                 this.addEventListener(input[i],"keypress", this);
  132.                 this.addEventListener(input[i],"keydown", this);
  133.             };
  134.         },
  135.         field:'',
  136.         idPressed: '',
  137.         fieldVal: '',
  138.         addEventListener: function(el, eventName, handler) {
  139.             if (el.addEventListener) {
  140.                 el.addEventListener(eventName, handler, false);
  141.             } else {
  142.                 el.attachEvent('on' + eventName, object.handleEvent);
  143.             }
  144.         },
  145.         handleEvent: function(e) {
  146.             var obj = Object;
  147.             var evt = e ? e:event;
  148.             var chrTyped, chrCode = 0;
  149.  
  150.             if (evt.charCode!=null)     chrCode = evt.charCode;
  151.             else if (evt.which!=null)   chrCode = evt.which;
  152.             else if (evt.keyCode!=null) chrCode = evt.keyCode;
  153.  
  154.             if (chrCode==0) chrTyped = 'SPECIAL KEY';
  155.             else chrTyped = String.fromCharCode(chrCode);
  156.             if (evt.keyCode==8) chrTyped = 'Backspace';
  157.  
  158.             if (isIE) {
  159.                 obj = object;
  160.             } else {
  161.                 obj = this;
  162.             }
  163.             obj.field = evt.target || evt.srcElement;
  164.             obj.idPressed = obj.field.getAttribute('id');
  165.             obj.fieldVal = obj.field.value;
  166.  
  167.             if (chrTyped != 'SPECIAL KEY') {
  168.                 obj.action(chrTyped);
  169.             }
  170.         },
  171.         action: function(a) {
  172.             var obj = Object;
  173.             if (isIE) {
  174.                 obj = object;
  175.             } else {
  176.                 obj = this;
  177.             }
  178.  
  179.             var id = obj.idPressed;
  180.             if (id == null) return true;
  181.  
  182.             var val = obj.fieldVal;
  183.             var idList = id.substring(14,id.length); //we remove "inputFilterFor" from input id
  184.  
  185.             var list = document.getElementById('filterFor'+idList); //to find list associated with input
  186.             if (list == null) return true;
  187.  
  188.             var listItem = list.getElementsByTagName('li');
  189.             if (listItem == null) return true;
  190.  
  191.             var span = null;
  192.  
  193.             //text filled in input form
  194.             if (a != 'Backspace') {
  195.                 //we add key because input value is filled after key is up
  196.                 val += a;
  197.             } else {
  198.                 val = val.substring(0, val.length-1);//we remove last char because input value is updated after key is up
  199.             }
  200.             // if empty, all the list is display
  201.             if(val == ''){
  202.                 for(var i =0, count = listItem.length; i < count; i++) {
  203.                     listItem[i].style.display = 'list-item';
  204.                 }
  205.                 return true;
  206.             }
  207.             // regex build from what is filled in form : (.*)e(.*)x(.*)e(.*)m(.*)p(.*)l(.*)e(.*)
  208.             var regexp = '\\b(.*)';
  209.             for(var i =0, count = val.length; i < count; i++){
  210.                 if (inArray(val[i],['.','?','*','+','/'])) {regexp += '(\\'+val[i]+')(.*)';}
  211.                 else if (val[i] != '') {regexp += '('+val[i]+')(.*)';}
  212.             }
  213.             regexp += '\\b';
  214.              // for each item of the list
  215.             for(var i =0, count = listItem.length; i < count; i++) {
  216.                 listItem[i].style.display = 'list-item';
  217.  
  218.                 // we looking for span tag wrapped by link tag
  219.                 var links = listItem[i].getElementsByTagName('a');
  220.                 for (var k = 0, c= links.length; k < c; k++) {
  221.                     var span = links[k].getElementsByTagName('span');
  222.                 }
  223.                 // we take the first one
  224.                 if (span[0] != undefined) {
  225.                     span = span[0];
  226.  
  227.                     if(span.innerHTML.match(new RegExp(regexp,'i'))) {
  228.                         listItem[i].style.display = 'list-item';
  229.                     } else {
  230.                         listItem[i].style.display = 'none';
  231.                     }
  232.                 }
  233.             }
  234.             return true;
  235.         }
  236.     };
  237.  
  238.     // Init
  239.     object.init();
  240.  
  241. })(window);

Télécharger

source Filtrer une liste en pur javascript et sans jQuery - Ecyseo