lib/form/searchableselector.js

   1 // This file is part of Moodle - http://moodle.org/
   2 //
   3 // Moodle is free software: you can redistribute it and/or modify
   4 // it under the terms of the GNU General Public License as published by
   5 // the Free Software Foundation, either version 3 of the License, or
   6 // (at your option) any later version.
   7 //
   8 // Moodle is distributed in the hope that it will be useful,
   9 // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11 // GNU General Public License for more details.
  12 //
  13 // You should have received a copy of the GNU General Public License
  14 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  15
  16 /**
  17  * javascript for a searchable select type element
  18  *
  19  * @package   formlib
  20  * @copyright 2009 Jerome Mouneyrac
  21  * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22  */
  23
  24 selector = {
  25     select: null,
  26     input: null,
  27     button: null,
  28     goodbrowser: false,
  29     alloptions: [],
  30
  31     filter_init: function(strsearch, selectinputid) {
  32         selector.goodbrowser = !(' ' + document.body.className + ' ').match(/ ie | safari /);
  33
  34         // selector.id = selectinputid
  35         selector.select = document.getElementById(selectinputid);
  36         selector.button = document.getElementById('settingssubmit');
  37
  38         // Copy all selector options into a plain array. selector.select.options
  39         // is linked live to the document, which causes problems in IE and Safari.
  40         for (var i = 0; i < selector.select.options.length; i++) {
  41             selector.alloptions[i] = selector.select.options[i];
  42         }
  43
  44         // Create a div to hold the search UI.
  45         var div = document.createElement('div');
  46         div.id = 'searchui';
  47
  48         // Find the capability search input.
  49         var input = document.createElement('input');
  50         input.type = 'text';
  51         input.id = selectinputid+'_search';
  52         selector.input = input;
  53
  54         // Create a label for the search input.
  55         var label = document.createElement('label');
  56         label.htmlFor = input.id;
  57         label.appendChild(document.createTextNode(strsearch + ' '));
  58
  59         // Tie it all together
  60         div.appendChild(label);
  61         div.appendChild(input);
  62         selector.select.parentNode.insertBefore(div, selector.select);
  63         input.addEventListener('keyup', selector.filter_change);
  64     },
  65
  66     filter_change: function() {
  67         var searchtext = selector.input.value.toLowerCase();
  68         var found = false;
  69         for (var i = 0; i < selector.alloptions.length; i++) {
  70             var option = selector.alloptions[i];
  71             if (option.text.toLowerCase().indexOf(searchtext) >= 0) {
  72                 // The option is matching the search text.
  73                 selector.set_visible(option, true);
  74                 found = true;
  75             } else {
  76                 selector.set_visible(option, false);
  77             }
  78         }
  79
  80         if (found) {
  81             // No error.
  82             selector.input.className = "";
  83         } else {
  84             // The search didn't find any matching, color the search text in red.
  85             selector.input.className = "error";
  86         }
  87     },
  88
  89     set_visible: function(element, visible) {
  90         if (selector.goodbrowser) {
  91             if (visible) {
  92                 element.style.display = 'block';
  93                 element.disabled = false;
  94             } else {
  95                 element.style.display = 'none';
  96                 element.selected = false;
  97                 element.disabled = true;
  98             }
  99         } else {
 100             // This is a deeply evil hack to make the filtering work in IE.
 101             // IE ignores display: none; on select options, but wrapping the
 102             // option in a span does seem to hide the option.
 103             // Thanks http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/
 104             if (visible) {
 105                 if (element.parentNode.tagName.toLowerCase() === 'span') {
 106                     element.parentNode.parentNode.replaceChild(element, element.parentNode); // New, old.
 107                 }
 108                 element.disabled = false;
 109             } else {
 110                 if (element.parentNode.tagName.toLowerCase() !== 'span') {
 111                     var span = document.createElement('span');
 112                     element.parentNode.replaceChild(span, element); // New, old.
 113                     span.appendChild(element);
 114                     span.style.display = 'none';
 115                 }
 116                 element.disabled = true;
 117                 element.selected = false;
 118             }
 119         }
 120     }
 121 };