Datalist-FFS

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)

• datalist_ffs.search(kw, 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 { 
        display:none; 
        position: absolute; 
        top: 100%; 
        left: 0; 
        width:100%; 
        overflow-y: auto; 
        max-height: 200px; 
        margin:0; 
        padding:0; 
        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