datalist.polyfill.js

// https://github.com/Fyrd/purejs-datalist-polyfill
// license: MIT
(function(document) {
    var IE_SELECT_ATTRIBUTE = 'data-datalist';
    var LIST_CLASS = 'datalist-polyfill';
    var ACTIVE_CLASS = 'datalist-polyfill__active';
    
    var datalistSupported = !!(document.createElement('datalist') && window.HTMLDataListElement);
    var ua = navigator.userAgent;
    
    // Android does not have actual support
    var isAndroidBrowser = ua.match(/Android/) && !ua.match(/(Firefox|Chrome|Opera|OPR)/);
    if( datalistSupported && !isAndroidBrowser ) {
        return;
    }
    
    var inputs = document.querySelectorAll('input[list]');
    
    var triggerEvent = function(elem, eventType) {
        var event;
        if (document.createEvent) {
            event = document.createEvent("HTMLEvents");
            event.initEvent(eventType, true, true);
            elem.dispatchEvent(event);
        } else {
            event = document.createEventObject();
            event.eventType = eventType;
            elem.fireEvent("on" + eventType, event);
        }
    };

    for( var i = 0; i < inputs.length; i++ ) {
        var input = inputs[i];
        var listId = input.getAttribute('list');
        var datalist = document.getElementById(listId);
        if( !datalist ) {
            console.error('No datalist found for input: ' + listId);
            return;
        }
        
        // Only visible to <= IE9
        var childSelect = document.querySelector('select[' + IE_SELECT_ATTRIBUTE + '="' + listId + '"]');
        var parent = childSelect || datalist;
        var listItems = parent.getElementsByTagName('option');
        convert(input, datalist, listItems);
        if( childSelect ) {
            childSelect.parentNode.removeChild( childSelect );
        }
    }
    
    function convert(input, datalist, listItems) {
        var fakeList = document.createElement('ul');
        var visibleItems = null;
        fakeList.id = listId;
        fakeList.className = LIST_CLASS;
        document.body.appendChild( fakeList );

        var scrollValue = 0;

          // Used to prevent reflow
        var tempItems = document.createDocumentFragment();
        
        for( var i = 0; i < listItems.length; i++ ) {
            var item = listItems[i];
            var li = document.createElement('li');
            li.innerText = item.value;
            tempItems.appendChild( li );
        }
        fakeList.appendChild( tempItems );
        var fakeItems = fakeList.childNodes;
        var eachItem = function(callback) {
            for( var i = 0; i < fakeItems.length; i++ ) {
                callback(fakeItems[i]);
            }
        };
        var listen = function(elem, event, func) {
            if( elem.addEventListener ) {
                elem.addEventListener(event, func, false);
            } else {
                elem.attachEvent('on' + event, func);
            }
        };
        
        datalist.parentNode.removeChild( datalist );
        
        listen(input, 'focus', function() {
            // Reset scroll
            fakeList.scrollTop = 0;
            scrollValue = 0;
        });
        
        listen(input, 'blur', function(evt) {
            // If this fires immediately, it prevents click-to-select from working
            setTimeout(function() {
                fakeList.style.display = 'none';
                eachItem( function(item) {
                    // Note: removes all, not just ACTIVE_CLASS, but should be safe
                    item.className = '';
                });
            }, 100);
        });
        
        var positionList = function() {
            fakeList.style.top = input.offsetTop + input.offsetHeight + 'px';
            fakeList.style.left = input.offsetLeft + 'px';
            fakeList.style.width = input.offsetWidth + 'px';
        };
        
        var itemSelected = function(item) {
            input.value = item.innerText;
            triggerEvent(input, 'change');
            setTimeout(function() {
                fakeList.style.display = 'none';
            }, 100);
        };
        
        var buildList = function(e) {
            // Build datalist
            fakeList.style.display = 'block';
            positionList();
            visibleItems = [];
            eachItem( function(item) {
                // Note: removes all, not just ACTIVE_CLASS, but should be safe
                var query = input.value.toLowerCase();
                var isFound = query.length && item.innerText.toLowerCase().indexOf( query ) > -1;
                if( isFound ) {
                    visibleItems.push( item );
                }
                item.style.display = isFound ? 'block' : 'none';
            } );
        };
        
        listen(input, 'keyup', buildList);
        listen(input, 'focus', buildList);
        
        // Don't want to use :hover in CSS so doing this instead
        // really helps with arrow key navigation
        eachItem( function(item) {
            // Note: removes all, not just ACTIVE_CLASS, but should be safe
            listen(item, 'mouseover', function(evt) {
                eachItem( function(_item) {
                    _item.className = item == _item ? ACTIVE_CLASS : '';
                });
            });
            listen(item, 'mouseout', function(evt) {
                item.className = '';
            });
            // Mousedown fires before native 'change' event is triggered
            // So we use this instead of click so only the new value is passed to 'change'
            listen(item, 'mousedown', function(evt) {
                itemSelected(item);
            });
        });
        
        listen(window, 'resize', positionList);
        
        listen(input, 'keydown', function(e) {
            var activeItem = fakeList.querySelector("." + ACTIVE_CLASS);
            if( !visibleItems.length ) {
                return;
            }
            
            var lastVisible = visibleItems[ visibleItems.length-1 ];
            var datalistItemsHeight = lastVisible.offsetTop + lastVisible.offsetHeight;
            
            // up/down arrows
            var isUp = e.keyCode == 38;
            var isDown = e.keyCode == 40;
            if ( (isUp || isDown) ) {
                if( isDown && !activeItem ) {
                    visibleItems[0].className = ACTIVE_CLASS;
                } else if (activeItem) {
                    var prevVisible = null;
                    var nextVisible = null;
                    for( var i = 0; i < visibleItems.length; i++ ) {
                        var visItem = visibleItems[i];
                        if( visItem == activeItem ) {
                            prevVisible = visibleItems[i-1];
                            nextVisible = visibleItems[i+1];
                            break;
                        }
                    }

                    activeItem.className = '';
                    if ( isUp ) {
                        if( prevVisible ) {
                            prevVisible.className = ACTIVE_CLASS;
                            if ( prevVisible.offsetTop < fakeList.scrollTop ) {
                                fakeList.scrollTop -= prevVisible.offsetHeight;
                            }
                        } else {
                            visibleItems[visibleItems.length - 1].className = ACTIVE_CLASS;
                        }
                    }
                    if ( isDown ) {
                        if( nextVisible ) { 
                            nextVisible.className = ACTIVE_CLASS;
                            if( nextVisible.offsetTop + nextVisible.offsetHeight > fakeList.scrollTop + fakeList.offsetHeight ) {
                                fakeList.scrollTop += nextVisible.offsetHeight;
                            }
                        } else {
                            visibleItems[0].className = ACTIVE_CLASS;
                        }
                    }
                }
            }
            
            // return or tab key
            if ( activeItem && (e.keyCode == 13 || e.keyCode == 9) ){
                itemSelected(activeItem);
            }
        });
    }
}(document));