Makes data lists work with JS.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Patxi Pierce 00f3a38041 Booyaka! 2 years ago Booyaka! 2 years ago
datalist-ffs.js Booyaka! 2 years ago
datalist-ffs.min.js Booyaka! 2 years ago
index.html Booyaka! 2 years ago
tests.html Booyaka! 2 years ago


The <datalist> element is not ready for th web yet. It cannot be assigned direct listeners, and is mostly impervious to style.

This tiny library is meant to address the problem by being unintrusive, and as platform agnostic as possible... As long as it is used in a browser ^_^.

It has few but flexible settings to make the most of your list.

The methods available are:

  • datalist_ffs.init(settings)

    • Where settings is an object with the following defaults:
    var settings = {
        // Where the default data is stored
        data : [],
        // Classes for each of the elements
        container_class : 'datalist-ffs',
        input_class : 'datalist-ffs-input',
        list_class : 'datalist-ffs-list',
        // The CSS to inject into the header 
        // Set it to false for no default style
        css : '',
        // Make searches case sensitive
        case_sensitive : false,
        // Callbacks
        on_select : function(w, el){ return w; },
        on_search : function(a, w, el){ return a; }
  • datalist_ffs.create_lists()

  • datalist_ffs.collect_data(el) Where el is the node to collect data for.

  • datalist_ffs.create_list(list_arr)

  • datalist_ffs.generate_css()

  • datalist_ffs.listeners()

  • datalist_ffs.list_open(ul)

  • datalist_ffs.list_close(ul)

  •, box)

  • datalist_ffs.update_list(box, list_arr)

The styles are set through adjustable classes and default to the following:

    .datalist-ffs { position: relative; }
    .datalist-ffs-input { width: 100%; }
    .datalist-ffs-list { 
        position: absolute; 
        top: 100%; 
        left: 0; 
        overflow-y: auto; 
        max-height: 200px; 
        z-index: 99; 
        background-color: #111; 
        color: #ddd; 
    .datalist-ffs-list li { list-style-type: none; cursor: pointer; }
    .datalist-ffs-list li:hover { color: #fff; background-color: #333; }

To set up your own file see the tests page