Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
JavaScript
branch: master

This branch is 12 commits ahead, 5 commits behind CSS-Tricks:master

Failed to load latest commit information.
css Updated active class and data list class
js Updated active class and data list class
index.html Added minified jquery
readme.markdown Merged

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 dependancies (make totally standalone)
Something went wrong with that request. Please try again.