JavaScript HTML CSS
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css polyfill instead of two ways Dec 1, 2011
js Append List to Input Parent Oct 14, 2016
index.html updated for jQuery 1.8 Oct 18, 2012
readme.markdown

readme.markdown

#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)