1  
   2  /*
   3   * A very simple script to filter a table according to search criteria
   4   *
   5   * http://leparlement.org/filterTable
   6   * See also http://www.vonloesch.de/node/23
   7   */
   8  function filterTable(term, table) {
   9    dehighlight(table);
  10    var terms = term.value.toLowerCase().split(" ");
  11  
  12    for (var r = 1; r < table.rows.length; r++) {
  13      var display = '';
  14      for (var i = 0; i < terms.length; i++) {
  15        if (table.rows[r].innerHTML.replace(/<[^>]+>/g, "").toLowerCase()
  16          .indexOf(terms[i]) < 0) {
  17          display = 'none';
  18        } else {
  19          if (terms[i].length) highlight(terms[i], table.rows[r]);
  20        }
  21        table.rows[r].style.display = display;
  22      }
  23    }
  24  }
  25  
  26  
  27  /*
  28   * Transform back each
  29   * <span>preText <span class="highlighted">term</span> postText</span>
  30   * into its original
  31   * preText term postText
  32   */
  33  function dehighlight(container) {
  34    for (var i = 0; i < container.childNodes.length; i++) {
  35      var node = container.childNodes[i];
  36  
  37      if (node.attributes && node.attributes['class']
  38        && node.attributes['class'].value == 'highlighted') {
  39        node.parentNode.parentNode.replaceChild(
  40            document.createTextNode(
  41              node.parentNode.innerHTML.replace(/<[^>]+>/g, "")),
  42            node.parentNode);
  43        // Stop here and process next parent
  44        return;
  45      } else if (node.nodeType != 3) {
  46        // Keep going onto other elements
  47        dehighlight(node);
  48      }
  49    }
  50  }
  51  
  52  /*
  53   * Create a
  54   * <span>preText <span class="highlighted">term</span> postText</span>
  55   * around each search term
  56   */
  57  function highlight(term, container) {
  58    for (var i = 0; i < container.childNodes.length; i++) {
  59      var node = container.childNodes[i];
  60  
  61      if (node.nodeType == 3) {
  62        // Text node
  63        var data = node.data;
  64        var data_low = data.toLowerCase();
  65        if (data_low.indexOf(term) >= 0) {
  66          //term found!
  67          var new_node = document.createElement('span');
  68  
  69          node.parentNode.replaceChild(new_node, node);
  70  
  71          var result;
  72          while ((result = data_low.indexOf(term)) != -1) {
  73            new_node.appendChild(document.createTextNode(
  74                  data.substr(0, result)));
  75            new_node.appendChild(create_node(
  76                  document.createTextNode(data.substr(
  77                      result, term.length))));
  78            data = data.substr(result + term.length);
  79            data_low = data_low.substr(result + term.length);
  80          }
  81          new_node.appendChild(document.createTextNode(data));
  82        }
  83      } else {
  84        // Keep going onto other elements
  85        highlight(term, node);
  86      }
  87    }
  88  }
  89  
  90  function create_node(child) {
  91    var node = document.createElement('span');
  92    node.setAttribute('class', 'highlighted');
  93    node.attributes['class'].value = 'highlighted';
  94    node.appendChild(child);
  95    return node;
  96  }
  97  
  98  /*
  99   * Here is the code used to set a filter on all filterable elements, usually I
 100   * use the behaviour.js library which does that just fine
 101   */
 102  tables = document.getElementsByTagName('table');
 103  for (var t = 0; t < tables.length; t++) {
 104    element = tables[t];
 105  
 106    if (element.attributes['class']
 107      && element.attributes['class'].value == 'filterable') {
 108  
 109      /* Here is dynamically created a form */
 110      var form = document.createElement('form');
 111      form.setAttribute('class', 'filter');
 112      // For ie...
 113      form.attributes['class'].value = 'filter';
 114      var input = document.createElement('input');
 115      input.onkeyup = function() {
 116        filterTable(input, element);
 117      }
 118      form.appendChild(input);
 119      element.parentNode.insertBefore(form, element);
 120    }
 121  }