https://github.com/css-tricks/relevant-dropdowns
https://github.com/css-tricks/relevant-dropdowns
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/css-tricks/relevant-dropdowns
- Owner: CSS-Tricks
- Created: 2011-12-01T03:01:14.000Z (over 14 years ago)
- Default Branch: master
- Last Pushed: 2021-08-11T15:44:36.000Z (almost 5 years ago)
- Last Synced: 2025-07-26T02:49:14.612Z (11 months ago)
- Language: JavaScript
- Homepage: http://css-tricks.com/examples/RelevantDropdown
- Size: 141 KB
- Stars: 134
- Watchers: 13
- Forks: 45
- Open Issues: 6
-
Metadata Files:
- Readme: readme.markdown
Awesome Lists containing this project
README
# 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
```html
```
### Include jQuery and Modernizr in head of document
```html
```
### Run the Modernizr test, and load polyfill stuff if needed
```html
yepnope({
test : (!Modernizr.input.list || (parseInt($.browser.version) > 400)),
yep : [
'js/jquery.relevant-dropdown.js',
'js/load-fallbacks.js'
]
});
```
load-fallbacks.js calls the plugin. Example contents:
```js
$('#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)