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
  29     filter_init: function(strsearch, selectinputid) {
  30         // selector.id = selectinputid
  31         selector.select = document.getElementById(selectinputid);
  32         selector.button = document.getElementById('settingssubmit');
  33
  34         // Create a div to hold the search UI.
  35         var div = document.createElement('div');
  36         div.id = 'searchui';
  37
  38         // Find the capability search input.
  39         var input = document.createElement('input');
  40         input.type = 'text';
  41         input.id = selectinputid+'_search';
  42         selector.input = input;
  43
  44         // Create a label for the search input.
  45         var label = document.createElement('label');
  46         label.htmlFor = input.id;
  47         label.appendChild(document.createTextNode(strsearch + ' '));
  48
  49         // Tie it all together
  50         div.appendChild(label);
  51         div.appendChild(input);
  52         selector.select.parentNode.insertBefore(div, selector.select);
  53         YUI().use('yui2-event', function(Y) {
  54             Y.YUI2.util.Event.addListener(input, 'keyup', selector.filter_change);
  55         });
  56     },
  57
  58     filter_change: function() {
  59         var searchtext = selector.input.value.toLowerCase();
  60         var options = selector.select.options;
  61         var matchingoption = -1;
  62         for (var i = 0; i < options.length; i++) {
  63             var optiontext = options[i].text.toLowerCase();
  64             if (optiontext.indexOf(searchtext) >= 0) { //the option is matching the search text
  65                 options[i].disabled = false; //the option must be visible
  66                 options[i].style.display = 'block';
  67                 if (matchingoption == -1) { //we found at least one
  68                     matchingoption = i;
  69                 }
  70             } else {
  71                 options[i].disabled = true;
  72                 options[i].selected = false;
  73                 options[i].style.display = 'none';
  74             }
  75         }
  76
  77         if (matchingoption == -1) { //the search didn't find any matching, color the search text in red
  78             selector.input.className = "error";
  79         } else {
  80             selector.input.className = "";
  81         }
  82
  83     }
  84
  85 };
  86