jquery.autocomplete.js 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. /*
  2. jQuery autoComplete v1.0.7
  3. Copyright (c) 2014 Simon Steinberger / Pixabay
  4. GitHub: https://github.com/Pixabay/jQuery-autoComplete
  5. License: http://www.opensource.org/licenses/mit-license.php
  6. */
  7. (function ($) {
  8. $.fn.autoComplete = function (options) {
  9. var o = $.extend({}, $.fn.autoComplete.defaults, options);
  10. // public methods
  11. if (typeof options == 'string') {
  12. this.each(function () {
  13. var that = $(this);
  14. if (options == 'destroy') {
  15. $(window).off('resize.autocomplete', that.updateSC);
  16. that.off('blur.autocomplete focus.autocomplete keydown.autocomplete keyup.autocomplete');
  17. if (that.data('autocomplete'))
  18. that.attr('autocomplete', that.data('autocomplete'));
  19. else
  20. that.removeAttr('autocomplete');
  21. $(that.data('sc')).remove();
  22. that.removeData('sc').removeData('autocomplete');
  23. }
  24. });
  25. return this;
  26. }
  27. return this.each(function () {
  28. var that = $(this);
  29. // sc = 'suggestions container'
  30. that.sc = $('<div class="autocomplete-suggestions ' + o.menuClass + '"></div>');
  31. that.data('sc', that.sc).data('autocomplete', that.attr('autocomplete'));
  32. that.attr('autocomplete', 'off');
  33. that.cache = {};
  34. that.last_val = '';
  35. that.updateSC = function (resize, next) {
  36. that.sc.css({
  37. top: that.offset().top + that.outerHeight() - (that.sc.css("position") == "fixed" ? $(window).scrollTop() : 0),
  38. left: that.offset().left,
  39. width: that.outerWidth()
  40. });
  41. if (!resize) {
  42. that.sc.show();
  43. if (!that.sc.maxHeight) that.sc.maxHeight = parseInt(that.sc.css('max-height'));
  44. if (!that.sc.suggestionHeight) that.sc.suggestionHeight = $('.autocomplete-suggestion', that.sc).first().outerHeight();
  45. if (that.sc.suggestionHeight)
  46. if (!next) that.sc.scrollTop(0);
  47. else {
  48. var scrTop = that.sc.scrollTop(), selTop = next.offset().top - that.sc.offset().top;
  49. if (selTop + that.sc.suggestionHeight - that.sc.maxHeight > 0)
  50. that.sc.scrollTop(selTop + that.sc.suggestionHeight + scrTop - that.sc.maxHeight);
  51. else if (selTop < 0)
  52. that.sc.scrollTop(selTop + scrTop);
  53. }
  54. }
  55. }
  56. $(window).on('resize.autocomplete', that.updateSC);
  57. that.sc.appendTo('body');
  58. that.on('click', function () {
  59. if ($(this).val().length > 0 && that.sc.is(":hidden")) {
  60. setTimeout(function () {
  61. that.sc.show();
  62. }, 100);
  63. }
  64. });
  65. that.sc.on('mouseleave', '.autocomplete-suggestion', function () {
  66. $('.autocomplete-suggestion.selected').removeClass('selected');
  67. });
  68. that.sc.on('mouseenter', '.autocomplete-suggestion', function () {
  69. $('.autocomplete-suggestion.selected').removeClass('selected');
  70. $(this).addClass('selected');
  71. });
  72. that.sc.on('mousedown click', '.autocomplete-suggestion', function (e) {
  73. var item = $(this), v = item.data('val');
  74. if (v || item.hasClass('autocomplete-suggestion')) { // else outside click
  75. that.val(v);
  76. o.onSelect(e, v, item);
  77. that.sc.hide();
  78. }
  79. return false;
  80. });
  81. that.on('blur.autocomplete', function () {
  82. try {
  83. over_sb = $('.autocomplete-suggestions:hover').length;
  84. } catch (e) {
  85. over_sb = 0;
  86. } // IE7 fix :hover
  87. if (!over_sb) {
  88. that.last_val = that.val();
  89. that.sc.hide();
  90. setTimeout(function () {
  91. that.sc.hide();
  92. }, 350); // hide suggestions on fast input
  93. } else if (!that.is(':focus')) setTimeout(function () {
  94. that.focus();
  95. }, 20);
  96. });
  97. if (!o.minChars) that.on('focus.autocomplete', function () {
  98. that.last_val = '\n';
  99. that.trigger('keyup.autocomplete');
  100. });
  101. function suggest(data) {
  102. var val = that.val();
  103. that.cache[val] = data;
  104. if (data.length && val.length >= o.minChars) {
  105. var s = '';
  106. if (data.length > 0) {
  107. s += typeof o.header === 'function' ? o.header.call(data, o, that) : o.header;
  108. for (var i = 0; i < data.length; i++) s += o.renderItem(data[i], val);
  109. s += typeof o.footer === 'function' ? o.footer.call(data, o, that) : o.footer;
  110. }
  111. that.sc.html(s);
  112. that.updateSC(0);
  113. } else
  114. that.sc.hide();
  115. }
  116. that.on('keydown.autocomplete', function (e) {
  117. // down (40), up (38)
  118. if ((e.which == 40 || e.which == 38) && that.sc.html()) {
  119. var next, sel = $('.autocomplete-suggestion.selected', that.sc);
  120. if (!sel.length) {
  121. next = (e.which == 40) ? $('.autocomplete-suggestion', that.sc).first() : $('.autocomplete-suggestion', that.sc).last();
  122. that.val(next.addClass('selected').data('val'));
  123. } else {
  124. next = (e.which == 40) ? sel.next('.autocomplete-suggestion') : sel.prev('.autocomplete-suggestion');
  125. if (next.length) {
  126. sel.removeClass('selected');
  127. that.val(next.addClass('selected').data('val'));
  128. } else {
  129. sel.removeClass('selected');
  130. that.val(that.last_val);
  131. next = 0;
  132. }
  133. }
  134. that.updateSC(0, next);
  135. return false;
  136. }
  137. // esc
  138. else if (e.which == 27) that.val(that.last_val).sc.hide();
  139. // enter or tab
  140. else if (e.which == 13 || e.which == 9) {
  141. var sel = $('.autocomplete-suggestion.selected', that.sc);
  142. if (sel.length && that.sc.is(':visible')) {
  143. o.onSelect(e, sel.data('val'), sel);
  144. setTimeout(function () {
  145. that.sc.hide();
  146. }, 20);
  147. }
  148. }
  149. });
  150. that.on('keyup.autocomplete', function (e) {
  151. if (!~$.inArray(e.which, [13, 27, 35, 36, 37, 38, 39, 40])) {
  152. var val = that.val();
  153. if (val.length >= o.minChars) {
  154. if (val != that.last_val) {
  155. that.last_val = val;
  156. clearTimeout(that.timer);
  157. if (o.cache) {
  158. if (val in that.cache) {
  159. suggest(that.cache[val]);
  160. return;
  161. }
  162. // no requests if previous suggestions were empty
  163. for (var i = 1; i < val.length - o.minChars; i++) {
  164. var part = val.slice(0, val.length - i);
  165. if (part in that.cache && !that.cache[part].length) {
  166. suggest([]);
  167. return;
  168. }
  169. }
  170. }
  171. that.timer = setTimeout(function () {
  172. o.source(val, suggest)
  173. }, o.delay);
  174. }
  175. } else {
  176. that.last_val = val;
  177. that.sc.hide();
  178. }
  179. }
  180. });
  181. });
  182. }
  183. $.fn.autoComplete.defaults = {
  184. source: 0,
  185. minChars: 3,
  186. delay: 150,
  187. cache: 1,
  188. menuClass: '',
  189. header: '',
  190. footer: '',
  191. renderItem: function (item, search) {
  192. // escape special characters
  193. search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
  194. var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
  195. return '<div class="autocomplete-suggestion" data-val="' + item + '">' + item.replace(re, "<b>$1</b>") + '</div>';
  196. },
  197. onSelect: function (e, term, item) {
  198. }
  199. };
  200. }(jQuery));