|
4 years ago | |
---|---|---|
README.md | 4 years ago | |
datalist-ffs.js | 4 years ago | |
datalist-ffs.min.js | 4 years ago | |
index.html | 4 years ago | |
tests.html | 4 years ago |
README.md
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; } }
- Where
-
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