Request: Standalone Code

[Twipped]

I'd love to use this on all my sites, but we don't use jQuery or Modernizr and that's a lot of extra code (and page memory) to include just to get this functionality.

Please consider creating a standalone version.

[BaylorRae]

I think I've figured out how to check browser support. I've only tested this in Safari 5.1.1, Firefox 7.0.1, Chrome 15.0.874.121 and Opera 11.60 on my mac. So someone will need to see how this works in browsers on Windows.

var search = $('#search')[0];
if( search.list !== null || search.list !== undefined )
  console.log('supported!'); // Firefox and Opera pass

[ruanmer]

what about safari?? coz safari has partial support

[BaylorRae]

@ruanmer The code I included doesn't include Safari. Safari acts kind of weird because it finds the datalist, but it doesn't create the drop down.

[chriscoyier]

Yeah the majority of the suckness of testing for this is that Safari reports success but should not. Ideally we think of a fancy test we can perform (beyond just checking for the list attribute) that gives correct results in all browsers. I'm fairly stumped at the moment.

Ideally, that test would be baked into Modernizr.

[chrisabrams]

Any updates? +1 for stand alone.

[AlgyTaylor]

This will check for browser support then load the library w/o modernizr. Then

<script type="text/javascript">
            (function () {
                /**
                 * Loads a new javascript then performs a function
                 */
                function loadScript (url, then) {
                    var script = document.createElement('script');

                    script.addEventListener('load', then);
                    script.setAttribute('type', 'text/javascript');
                    script.setAttribute('src', url);

                    document.head.appendChild(script);
                }

                if (!('options' in document.createElement('datalist'))) {
                    loadScript('/path/to/jquery.relevant-dropdown.js', function () {
                        $('input[list]').relevantDropdown();
                    });
                }
            })();
</script>