Filament Group

This is a demo for a lightweight auto-complete that can be populated via JSON or by DOM element text. Visit the Github project page for documentation.

An input with auto-complete. NOTE: The data being served is a static mockup from $PROJECT_DIR/demo.json.

<input data-autocomplete="./demo.json" aria-controls="list" aria-haspopup="true">
<div class="suggest menu" data-menu>
  <ol>
  </ol>
</div>

Auto-complete with Select

An input with auto-complete where the data is pulled from the children of an associated DOM element. Here the DOM element is a select menu.

<label class="autocomplete">
  <input data-autocomplete-dom="#categories" data-best-match aria-controls="list" aria-haspopup="true" >
  <div class="suggest menu" data-menu>
    <ol>
    </ol>
  </div>
</label>

<select id="categories">
  <option value="Foo">Foo</option>
  <option value="Bar">Bar</option>
  <option value="Baz">Baz</option>
  <option value="Bak">Bak</option>
</select>

JSON response

The response from the server should be an array of strings matching the value of the input.


[
  "foo",
  "bar"
]

Dependencies

Ajax Response