select: null,
input: null,
button: null,
+ goodbrowser: false,
+ alloptions: [],
filter_init: function(strsearch, selectinputid) {
+ selector.goodbrowser = !(' ' + document.body.className + ' ').match(/ ie | safari /);
+
// selector.id = selectinputid
selector.select = document.getElementById(selectinputid);
selector.button = document.getElementById('settingssubmit');
+ // Copy all selector options into a plain array. selector.select.options
+ // is linked live to the document, which causes problems in IE and Safari.
+ for (var i = 0; i < selector.select.options.length; i++) {
+ selector.alloptions[i] = selector.select.options[i];
+ }
+
// Create a div to hold the search UI.
var div = document.createElement('div');
div.id = 'searchui';
div.appendChild(label);
div.appendChild(input);
selector.select.parentNode.insertBefore(div, selector.select);
- YUI().use('yui2-event', function(Y) {
- Y.YUI2.util.Event.addListener(input, 'keyup', selector.filter_change);
- });
+ input.addEventListener('keyup', selector.filter_change);
},
filter_change: function() {
var searchtext = selector.input.value.toLowerCase();
- var options = selector.select.options;
- var matchingoption = -1;
- for (var i = 0; i < options.length; i++) {
- var optiontext = options[i].text.toLowerCase();
- if (optiontext.indexOf(searchtext) >= 0) { //the option is matching the search text
- options[i].disabled = false; //the option must be visible
- options[i].style.display = 'block';
- if (matchingoption == -1) { //we found at least one
- matchingoption = i;
- }
+ var found = false;
+ for (var i = 0; i < selector.alloptions.length; i++) {
+ var option = selector.alloptions[i];
+ if (option.text.toLowerCase().indexOf(searchtext) >= 0) {
+ // The option is matching the search text.
+ selector.set_visible(option, true);
+ found = true;
} else {
- options[i].disabled = true;
- options[i].selected = false;
- options[i].style.display = 'none';
+ selector.set_visible(option, false);
}
}
- if (matchingoption == -1) { //the search didn't find any matching, color the search text in red
- selector.input.className = "error";
- } else {
+ if (found) {
+ // No error.
selector.input.className = "";
+ } else {
+ // The search didn't find any matching, color the search text in red.
+ selector.input.className = "error";
}
+ },
+ set_visible: function(element, visible) {
+ if (selector.goodbrowser) {
+ if (visible) {
+ element.style.display = 'block';
+ } else {
+ element.style.display = 'none';
+ element.selected = false;
+ }
+ } else {
+ // This is a deeply evil hack to make the filtering work in IE.
+ // IE ignores display: none; on select options, but wrapping the
+ // option in a span does seem to hide the option.
+ // Thanks http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/
+ if (visible) {
+ if (element.parentNode.tagName.toLowerCase() === 'span') {
+ element.parentNode.parentNode.replaceChild(element, element.parentNode); // New, old.
+ }
+ element.enabled = true;
+ } else {
+ if (element.parentNode.tagName.toLowerCase() !== 'span') {
+ var span = document.createElement('span');
+ element.parentNode.replaceChild(span, element); // New, old.
+ span.appendChild(element);
+ span.style.display = 'none';
+ }
+ element.enabled = false;
+ element.selected = false;
+ }
+ }
}
-
};
-
