Relevant Dropdown

From 08465b4d267f4a7244921b5fccd1244ab4adaa09 Mon Sep 17 00:00:00 2001 From: Baylor Rae Date: Sun, 4 Dec 2011 16:40:23 -0600 Subject: [PATCH 01/23] Turned the JS into a plugin - Turned the original javascript into a plugin. - Changed the :contains expression to :RD_contains --- js/jquery.relevant-dropdown.js | 181 +++++++++++++++++++++++++++++++++ 1 file changed, 181 insertions(+) create mode 100644 js/jquery.relevant-dropdown.js diff --git a/js/jquery.relevant-dropdown.js b/js/jquery.relevant-dropdown.js new file mode 100644 index 0000000..633663d --- /dev/null +++ b/js/jquery.relevant-dropdown.js @@ -0,0 +1,181 @@ +(function($) { + + // Make jQuery's :contains case insensitive (like HTML5 datalist) + // Changed the name to prevent overriding original functionality + $.expr[':'].RD_contains = function(a, i, m) { + return $(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; + }; + + + $.fn.relevantDropdown = function(options) { + + options = $.extend({ + fadeOutSpeed: 'normal' // speed to fade out the dataList Popup + }, options); + + + return this.each(function() { + + var doc = $(document), + $searchInput = $(this), + $datalist = $("#" + $searchInput.attr("list")), + datalistItems = $datalist.find("option"), + + searchPosition, + scrollValue = 0; + + // Makes sure the browser doesn't already support the list attribute + // todo: I couldn't figure out how to make an opposite `if statement` without Safari acting up + if( !Modernizr.input.list || (parseInt($.browser.version) > 400) ) { + + // Insert home for new fake datalist + $("

", { + "text": $(this).val() + }).appendTo($datalist); + }); + + // Update pointer + var datalistItems = $datalist.find("li"); + + // Typey type type + $searchInput + .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 = $searchInput.position(); + + // Build datalist + $datalist + .show() + .css({ + top: searchPosition.top + $(this).outerHeight(), + left: searchPosition.left, + width: $searchInput.outerWidth() + }); + + datalistItems.hide(); + $datalist.find("li:RD_contains('" + $searchInput.val() + "')").show(); + }); + + // Don't want to use :hover in CSS so doing this instead + datalistItems.on("mouseenter", function() { + $(this).addClass("active").siblings().removeClass("active"); + }); + datalistItems.on("mouseleave", function() { + $(this).removeClass("active"); + }); + + // Window resize + $(window).resize(function() { + searchPosition = $searchInput.position(); + $datalist + .css({ + top: searchPosition.top + $(this).outerHeight(), + left: searchPosition.left, + width: $searchInput.outerWidth() + }); + }); + + // Watch arrow keys for up and down + $searchInput.on("keydown", function(e) { + + var active = $("li.active"); + var datalistHeight = $datalist.outerHeight(); + var 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 ( active.prevAll(":visible").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 ( active.nextAll(":visible").position().top == datalistHeight ){ + $datalist.scrollTop(scrollValue+=datalistItemsHeight); + } + } else { + datalistItems.removeClass("active"); + $datalist.find("li:visible:first").addClass("active"); + } + } + + // return or tab key + if ( e.keyCode == 13 || e.keyCode == 9 ) { + var active = $("li.active"); + if (active.length) { + $searchInput.val(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) { + $searchInput.val($(this).text()); + } + $datalist.fadeOut(options.fadeOutSpeed); + datalistItems.removeClass("active"); + }); + + } + + }); + }; + +})(jQuery); \ No newline at end of file From 1635093bc0bfd694068c3f81c1d1fa4d80abaa42 Mon Sep 17 00:00:00 2001 From: Baylor Rae
Date: Sun, 4 Dec 2011 16:50:15 -0600 Subject: [PATCH 02/23] updated readme --- readme.markdown | 34 +++++++++++++++++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/readme.markdown b/readme.markdown index 4265761..3d5a4bb 100644 --- a/readme.markdown +++ b/readme.markdown @@ -4,7 +4,7 @@ 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. @@ -26,6 +26,38 @@ You'll need the scripts: ``` +### Using the Plugin + +Markup + +``` + + + + +``` + +Include jQuery, Modernizer and the Plugin: + +``` + + + +``` + +Using the Plugin + +``` + +``` + On Line 12 of the relevant-dropdown.js file you can change the ID to your own search input's ID. ###TODO From aaa039d116266f1b73fb5a1f2e718cb7ee703d98 Mon Sep 17 00:00:00 2001 From: Baylor Rae
Date: Sun, 4 Dec 2011 17:06:47 -0600 Subject: [PATCH 03/23] updated readme again --- readme.markdown | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/readme.markdown b/readme.markdown index 3d5a4bb..5024756 100644 --- a/readme.markdown +++ b/readme.markdown @@ -26,6 +26,8 @@ You'll need the scripts: ``` +On Lines `[12, 42, 47, 55, 91]` of the relevant-dropdown.js file you can change the ID to your own search input's ID. + ### Using the Plugin Markup @@ -58,11 +60,8 @@ Using the Plugin ``` -On Line 12 of the relevant-dropdown.js file you can change the ID to your own search input's ID. - ###TODO - Make better -- Plugize / work on multiple inputs - Better IE styling - Might be able to remove Modernizr and just test for support of list attribute in element \ No newline at end of file From 39ce268b07c1677ef33c31825ee125f677a00124 Mon Sep 17 00:00:00 2001 From: Baylor Rae
Date: Sun, 4 Dec 2011 17:20:24 -0600 Subject: [PATCH 04/23] Changed the $searchInput variable to $input --- js/jquery.relevant-dropdown.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/js/jquery.relevant-dropdown.js b/js/jquery.relevant-dropdown.js index 633663d..d6cde57 100644 --- a/js/jquery.relevant-dropdown.js +++ b/js/jquery.relevant-dropdown.js @@ -17,8 +17,8 @@ return this.each(function() { var doc = $(document), - $searchInput = $(this), - $datalist = $("#" + $searchInput.attr("list")), + $input = $(this), + $datalist = $("#" + $input.attr("list")), datalistItems = $datalist.find("option"), searchPosition, @@ -31,14 +31,14 @@ // Insert home for new fake datalist $("

A HTML5 datalist polyfill that depends on jQuery and Modernizr.