// Licensed under the Apache License, Version 2.0 (the "License"); you may not // use this file except in compliance with the License. You may obtain a copy // of the License at // // http://www.apache.org/licenses/LICENSE-2.0 // // Unless required by applicable law or agreed to in writing, software // distributed under the License is distributed on an "AS IS" BASIS, WITHOUT // WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the // License for the specific language governing permissions and limitations under // the License. (function($) { suggest = function(elem, options) { var timer = null; var prevVal = null; var input = $(elem).attr("autocomplete", "off"); var offset = input.offset(); var dropdown = $('') .addClass(options.dropdownClass).appendTo("body").css({ top: (offset.top + elem.offsetHeight) + "px", left: offset.left + "px", minWidth: input.css("width") }); input .blur(function() { if (timer) clearTimeout(timer); setTimeout(function() { dropdown.hide() }, 200); }) .keydown(function(e) { if ($.inArray(e.keyCode, [16, 17, 18, 20, 144, 91, 93, 224]) != -1) { return; // ignore modifier keys } if (timer) clearTimeout(timer); if ($.inArray(e.keyCode, [38, 40]) != -1 || (dropdown.is(":visible") && (e.keyCode == 27 || ($.inArray(e.keyCode, [9, 13]) != -1 && getSelection())))) { switch(e.keyCode) { case 38: // up moveUp(); break; case 40: // down moveDown(); break; case 9: // tab case 13: // return commit(); if (e.keyCode == 9) return true; break; case 27: // escape dropdown.hide(); break; } e.preventDefault(); e.stopPropagation(); return false; } else { timer = setTimeout(function() { suggest() }, options.delay); } }); function suggest(force) { var newVal = $.trim(input.val()); if (force || newVal != prevVal) { if (force || newVal.length >= options.minChars) { options.callback.apply(elem, [$.trim(input.val()), function(items, render) { show(items, render); }]); } else { dropdown.hide(); } prevVal = newVal; } } function show(items, render) { if (!items) return; if (!items.length) { dropdown.hide(); return; } render = render || function(idx, value) { return value; } dropdown.empty(); for (var i = 0; i < items.length; i++) { var item = $("
  • ").data("value", items[i]); var rendered = render(i, items[i]); if (typeof(rendered) == "string") { item.text(rendered); } else { item.append(rendered); } item.appendTo(dropdown); } dropdown.slideDown("fast"); dropdown.children('li').click(function(e) { $(this).addClass("selected"); commit(); }); } function commit() { var sel = getSelection(); if (sel) { prevVal = sel.data("value"); input.val(prevVal); if (options.select) { options.select.apply(elem, [prevVal]); } dropdown.hide(); } if (timer) clearTimeout(timer) } function getSelection() { if (!dropdown.is(":visible")) return null; var sel = dropdown.children("li.selected"); return sel.length ? sel : null; } function moveDown() { if (!dropdown.is(":visible")) suggest(true); var sel = getSelection(); if (sel) sel.removeClass("selected").next().addClass("selected"); else dropdown.children("li:first-child").addClass("selected"); } function moveUp() { if (!dropdown.is(":visible")) suggest(true); var sel = getSelection(); if (sel) sel.removeClass("selected").prev().addClass("selected"); else dropdown.children("li:last-child").addClass("selected"); } } $.fn.suggest = function(callback, options) { options = $.extend({ callback: callback, delay: 100, dropdownClass: "suggest-dropdown", minChars: 1, select: null }, options || {}); return this.each(function() { suggest(this, options); }); }; })(jQuery);