Examples & Testing

All features demonstrated with live interactive inputs. Every input shows its stored value below it.

1. Native <datalist>

Using data from a <datalist> element — the standard browser behaviour, enhanced with styled results.

Basic datalist suggestion

Stored: —

<input class="flexdatalist" list="languages" data-min-length="1" name="lang_basic">

Datalist — selection required

Stored: —

data-selection-required="true"

Datalist — multiple values

Stored: —

multiple

Datalist — multiple + selection required

Stored: —

multiple data-selection-required="true"

2. Static Array Data

Pass data directly via the JS data option (or point data-data to a JSON file).

Basic — search in label

Stored: —

Flexdatalist.init('#el', { data: FRUITS, searchIn: ['label'], minLength: 1 });

Search in multiple properties (label + color)

Stored: —

searchIn: ['label', 'color'], visibleProperties: ['label', 'color']

Static JSON file (data-data)

Stored: —

data-data="countries.json" data-search-in="name"

searchContain — match anywhere

Stored: —

searchContain: true

searchByWord — split on spaces

Stored: —

data-search-by-word="true"

searchEqual — exact full-string match new

Stored: —

searchEqual: true

minLength: 0 — show all on focus

Stored: —

minLength: 0, maxShownResults: 15

searchDisabled — skip local filtering

Stored: —

data-search-disabled="true"

3. Remote URL (url option)

Queried on every keystroke. For demo purposes we use the local countries.json as a simulated remote endpoint via data-url. In production, your server handles filtering server-side.

Remote — basic

Stored: —

data-url="countries.json" data-search-in='["name","continent","capital"]'

Remote — with localStorage cache

Stored: —

data-cache="true" data-cache-lifetime="120"

searchDelay — 800ms debounce

Stored: —

data-search-delay="800"

maxShownResults: 5

Stored: —

data-max-shown-results="5" data-min-length="0"

4. Multiple Values

Enable with multiple attribute or option. Use Enter ↵ or comma to add tags.

Multiple — free text

Stored: —

multiple: true

Multiple — selection required

Stored: —

multiple: true, selectionRequired: true

Multiple — pre-selected values (ids 1,3,5)

Stored: —

value="1,2,3" (pre-selected by id)

limitOfValues: 3

Stored: —

limitOfValues: 3

allowDuplicateValues

Stored: —

allowDuplicateValues: true

removeOnBackspace: false

Stored: —

removeOnBackspace: false

toggleSelected — click tag to disable

Stored: —

data-toggle-selected="true" value="166,149"

collapseAfterN: 3 new

Stored: —

collapseAfterN: 3, collapsedValuesText: '+{count} more'

5. valueProperty

Control what value is stored/submitted. Default = display text. Set '*' to store the whole object as JSON.

Store country id

Stored: —

data-value-property="id"

Store iso2 code

Stored: —

data-value-property="iso2"

Store entire object (*)

Stored: —

data-value-property="*"

Store entire object — multiple

Stored: —

data-value-property="*" multiple

Free-type + valueProperty *

Stored: —

selectionRequired omitted → free-type allowed

Static array — store fruit id

Stored: —

valueProperty: 'id', selectionRequired: true

6. textProperty

Control what text appears in the input after selection. Supports {placeholder} patterns.

textProperty = "name"

Stored: —

data-text-property="name"

textProperty with {placeholder} pattern

Stored: —

data-text-property="{capital}, {name} ({continent})"

Pattern + multiple + pre-selected (166, 149)

Stored: —

data-text-property="{capital}, {name}, {continent}" value="166,149"

Static data — pattern {label} ({color})

Stored: —

textProperty: '{label} ({color})', valueProperty: 'id'

7. groupBy

Group dropdown results by a property value.

Grouped by continent

Stored: —

data-group-by="continent"

Grouped by category — static array

Stored: —

groupBy: 'category'

8. More Search Options

focusFirstResult — auto-highlight first item

Stored: —

data-focus-first-result="true"

normalizeString — accent-insensitive

Stored: —

normalizeString: str => str.normalize('NFD').replace(/[\u0300-\u036f]/g, '')

redoSearchOnFocus: false

Stored: —

redoSearchOnFocus: false

selectionRequired — clears on blur if not selected

Stored: —

selectionRequired: true

9. showAddNewItem new

Show an "Add" option when no results match the keyword.

Single value + add new

Stored: —

showAddNewItem: true, addNewItemText: 'Add "{keyword}" as new fruit'

Multiple + add new

Stored: —

multiple: true, showAddNewItem: true

10. Relatives & Chained Relatives

Pass sibling inputs' values with every remote request. chainedRelatives disables the field until relatives are filled.

Step 1 — Select a country (id=#rel-country)

Stored: —

Step 2 — Relatives (sends #rel-country value to server)

Stored: —

data-relatives="#rel-country"

Step 3 — chainedRelatives (disabled until Step 2 is filled)

Stored: —

data-relatives="#rel-second" data-chained-relatives="true"

11. Programmatic API

Test the chainable JS API: getValue, setValue, addValue, removeValue, clear, disable, enable, readonly, search, destroy.

Stored: —

const [fd] = Flexdatalist.init('#api-input', { data: FRUITS, multiple: true, minLength: 0 }); fd.getValue() / fd.setValue('1,3') / fd.addValue('5') / fd.removeValue('1') fd.toggleValue('3') / fd.clear() / fd.disable() / fd.enable() fd.readonly(true) / fd.readonly(false) / fd.search('Apple') / fd.closeResults() fd.destroy() → use reinit() to recreate

getOption / setOption at runtime

Stored: —

fd.getOption('minLength') // → 3 fd.setOption('minLength', 0) // show all on focus now

12. Events Log

All CustomEvents dispatched on the element, visible in real time.

Stored: —

Event log

Events will appear here…

13. Disabled & Readonly

Disabled (HTML attr)

disabled

Disabled (data-disabled)

data-disabled="true"

Readonly

fd.readonly(true)

14. Advanced: Custom valuesSeparator

valuesSeparator: | (pipe)

Stored: —

valuesSeparator: '|'

noResultsText customised

Stored: —

noResultsText: '🚫 No fruit found for "{keyword}"'