Relevant Dropdown

A HTML5 datalist polyfill that depends on jQuery and Modernizr.

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.

Example HTML5 Markup

<input type="search" list="states" placeholder="Find U.S. State">

<datalist id="states">
	<option value="Alabama">
	<option value="Alaska">
  <!-- all states -->
</datalist>

Include jQuery and Modernizr in head of document

<script src="js/jquery-1.7.1.js"></script>
<script src="js/modernizr.custom.50983.js"></script>

Run the Modernizr test, and load polyfill stuff if needed

<script>
	yepnope({
	  test : (!Modernizr.input.list || (parseInt($.browser.version) > 400)),
	  yep : [
	      'js/jquery.relevant-dropdown.js',
	      'js/load-fallbacks.js'
	  ]
	});
</script>

load-fallbacks.js calls the plugin. Example contents:

$('#search').relevantDropdown();

$('#name').relevantDropdown({
  fadeOutSpeed: 0, // optional, default: 'normal;
	change: function(new_text) {
      console.log('the new value is: ', new_text);
  }
});

TODO

• Better IE styling (drop shadows don't work)
• Remove Modernizr and jQuery dependencies (make totally standalone)