A HTML5 datalist polyfill that depends on jQuery and Modernizr.

GitHub

", { + "class": "datalist", + "id" : list_id + }).appendTo("body"); + + // Remove old datalist + $datalist.remove(); + + // Update pointer + var $datalist = $("#" + list_id); + + // Fill new fake datalist + datalistItems.each(function() { + $("
• ", { + "text": $(this).val() + }).appendTo($datalist); + }); + + // Update pointer + datalistItems = $datalist.find("li"); + + // Typey type type + $input + .on("focus", function() { + // Reset scroll + $datalist.scrollTop(0); + scrollValue = 0; + }) + .on("blur", function() { + + // If this fires immediately, it prevents click-to-select from working + setTimeout(function() { + $datalist.fadeOut(options.fadeOutSpeed); + datalistItems.removeClass("active"); + }, 500); + }) + .on("keyup focus", function(e) { + searchPosition = $input.position(); + + // Build datalist + $datalist + .show() + .css({ + top: searchPosition.top + $(this).outerHeight(), + left: searchPosition.left, + width: $input.outerWidth() + }); + + datalistItems.hide(); + $datalist.find("li:RD_contains('" + $input.val() + "')").show(); + }); + + // Don't want to use :hover in CSS so doing this instead + // really helps with arrow key navigation + datalistItems + .on("mouseenter", function() { + $(this).addClass("active").siblings().removeClass("active"); + }) + .on("mouseleave", function() { + $(this).removeClass("active"); + }); + + // Window resize + $(window).resize(function() { + searchPosition = $input.position(); + $datalist + .css({ + top: searchPosition.top + $(this).outerHeight(), + left: searchPosition.left, + width: $input.outerWidth() + }); + }); + + // Watch arrow keys for up and down + $input.on("keydown", function(e) { + + var active = $("li.active"), + datalistHeight = $datalist.outerHeight(), + datalistItemsHeight = datalistItems.outerHeight(); + + // up arrow + if ( e.keyCode == 38 ) { + if (active.length) { + prevAll = active.prevAll("li:visible"); + if (prevAll.length > 0) { + active.removeClass("active"); + prevAll.eq(0).addClass("active"); + } + + if ( prevAll.length && prevAll.position().top < 0 && scrollValue > 0 ){ + $datalist.scrollTop(scrollValue-=datalistItemsHeight); + } + } + } + + // down arrow + if ( e.keyCode == 40 ) { + if (active.length) { + var nextAll = active.nextAll("li:visible"); + if (nextAll.length > 0) { + active.removeClass("active"); + nextAll.eq(0).addClass("active"); + } + + if ( nextAll.length && (nextAll.position().top + datalistItemsHeight) >= datalistHeight ){ + $datalist.stop().animate({ + scrollTop: scrollValue += datalistItemsHeight + }, 200); + } + } else { + datalistItems.removeClass("active"); + $datalist.find("li:visible:first").addClass("active"); + } + } + + // return or tab key + if ( e.keyCode == 13 || e.keyCode == 9 ) { + if (active.length) { + $input.val(active.text()); + item_selected(active.text()); + } + $datalist.fadeOut(options.fadeOutSpeed); + datalistItems.removeClass("active"); + } + + // keys + if ( e.keyCode != 13 && e.keyCode != 38 && e.keyCode != 40 ){ + // Reset active class + datalistItems.removeClass("active"); + $datalist.find("li:visible:first").addClass("active"); + + // Reset scroll + $datalist.scrollTop(0); + scrollValue = 0; + } + + }); + + // When choosing from dropdown + datalistItems.on("click", function() { + var active = $("li.active"); + if (active.length) { + $input.val($(this).text()); + } + $datalist.fadeOut(options.fadeOutSpeed); + datalistItems.removeClass("active"); + item_selected($(this).text()); + }); + + function item_selected(new_text) { + if( typeof options.change === 'function' ) + options.change.call(this, new_text); + } + + } // end if + }); + }; +})(jQuery); \ No newline at end of file diff --git a/js/relevant-dropdown.js b/js/relevant-dropdown.js index f78614b..c20d5d5 100644 --- a/js/relevant-dropdown.js +++ b/js/relevant-dropdown.js @@ -35,7 +35,7 @@ $(function() { }); // Update pointer - var datalistItems = $datalist.find("li"); + datalistItems = $datalist.find("li"); // Typey type type doc diff --git a/readme.markdown b/readme.markdown index 4265761..eefaec0 100644 --- a/readme.markdown +++ b/readme.markdown @@ -4,11 +4,11 @@ Datalist browser support (Dec 2011) is Firefox 4+, Opera 10.6+, and IE 10. It's reasonable that you'd want WebKit support. So. This. -###Usage +### Usage without the Plugin Markup like this. IMPORTANT, use value attribute not text. -``` +```html