SelectBox.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. (function($) {
  2. 'use strict';
  3. var SelectBox = {
  4. cache: {},
  5. init: function(id) {
  6. var box = document.getElementById(id);
  7. var node;
  8. SelectBox.cache[id] = [];
  9. var cache = SelectBox.cache[id];
  10. var boxOptions = box.options;
  11. var boxOptionsLength = boxOptions.length;
  12. for (var i = 0, j = boxOptionsLength; i < j; i++) {
  13. node = boxOptions[i];
  14. cache.push({value: node.value, text: node.text, displayed: 1});
  15. }
  16. },
  17. redisplay: function(id) {
  18. // Repopulate HTML select box from cache
  19. var box = document.getElementById(id);
  20. var node;
  21. $(box).empty(); // clear all options
  22. var new_options = box.outerHTML.slice(0, -9); // grab just the opening tag
  23. var cache = SelectBox.cache[id];
  24. for (var i = 0, j = cache.length; i < j; i++) {
  25. node = cache[i];
  26. if (node.displayed) {
  27. var new_option = new Option(node.text, node.value, false, false);
  28. // Shows a tooltip when hovering over the option
  29. new_option.setAttribute("title", node.text);
  30. new_options += new_option.outerHTML;
  31. }
  32. }
  33. new_options += '</select>';
  34. box.outerHTML = new_options;
  35. },
  36. filter: function(id, text) {
  37. // Redisplay the HTML select box, displaying only the choices containing ALL
  38. // the words in text. (It's an AND search.)
  39. var tokens = text.toLowerCase().split(/\s+/);
  40. var node, token;
  41. var cache = SelectBox.cache[id];
  42. for (var i = 0, j = cache.length; i < j; i++) {
  43. node = cache[i];
  44. node.displayed = 1;
  45. var node_text = node.text.toLowerCase();
  46. var numTokens = tokens.length;
  47. for (var k = 0; k < numTokens; k++) {
  48. token = tokens[k];
  49. if (node_text.indexOf(token) === -1) {
  50. node.displayed = 0;
  51. break; // Once the first token isn't found we're done
  52. }
  53. }
  54. }
  55. SelectBox.redisplay(id);
  56. },
  57. delete_from_cache: function(id, value) {
  58. var node, delete_index = null;
  59. var cache = SelectBox.cache[id];
  60. for (var i = 0, j = cache.length; i < j; i++) {
  61. node = cache[i];
  62. if (node.value === value) {
  63. delete_index = i;
  64. break;
  65. }
  66. }
  67. cache.splice(delete_index, 1);
  68. },
  69. add_to_cache: function(id, option) {
  70. SelectBox.cache[id].push({value: option.value, text: option.text, displayed: 1});
  71. },
  72. cache_contains: function(id, value) {
  73. // Check if an item is contained in the cache
  74. var node;
  75. var cache = SelectBox.cache[id];
  76. for (var i = 0, j = cache.length; i < j; i++) {
  77. node = cache[i];
  78. if (node.value === value) {
  79. return true;
  80. }
  81. }
  82. return false;
  83. },
  84. move: function(from, to) {
  85. var from_box = document.getElementById(from);
  86. var option;
  87. var boxOptions = from_box.options;
  88. var boxOptionsLength = boxOptions.length;
  89. for (var i = 0, j = boxOptionsLength; i < j; i++) {
  90. option = boxOptions[i];
  91. var option_value = option.value;
  92. if (option.selected && SelectBox.cache_contains(from, option_value)) {
  93. SelectBox.add_to_cache(to, {value: option_value, text: option.text, displayed: 1});
  94. SelectBox.delete_from_cache(from, option_value);
  95. }
  96. }
  97. SelectBox.redisplay(from);
  98. SelectBox.redisplay(to);
  99. },
  100. move_all: function(from, to) {
  101. var from_box = document.getElementById(from);
  102. var option;
  103. var boxOptions = from_box.options;
  104. var boxOptionsLength = boxOptions.length;
  105. for (var i = 0, j = boxOptionsLength; i < j; i++) {
  106. option = boxOptions[i];
  107. var option_value = option.value;
  108. if (SelectBox.cache_contains(from, option_value)) {
  109. SelectBox.add_to_cache(to, {value: option_value, text: option.text, displayed: 1});
  110. SelectBox.delete_from_cache(from, option_value);
  111. }
  112. }
  113. SelectBox.redisplay(from);
  114. SelectBox.redisplay(to);
  115. },
  116. sort: function(id) {
  117. SelectBox.cache[id].sort(function(a, b) {
  118. a = a.text.toLowerCase();
  119. b = b.text.toLowerCase();
  120. try {
  121. if (a > b) {
  122. return 1;
  123. }
  124. if (a < b) {
  125. return -1;
  126. }
  127. }
  128. catch (e) {
  129. // silently fail on IE 'unknown' exception
  130. }
  131. return 0;
  132. } );
  133. },
  134. select_all: function(id) {
  135. var box = document.getElementById(id);
  136. var boxOptions = box.options;
  137. var boxOptionsLength = boxOptions.length;
  138. for (var i = 0; i < boxOptionsLength; i++) {
  139. boxOptions[i].selected = 'selected';
  140. }
  141. }
  142. };
  143. window.SelectBox = SelectBox;
  144. })(django.jQuery);