Tag: Materialize

Materialize CSS Autocomplete with AJAX

Materialize CSS Autocomplete with AJAX

At the time of writing this article, Materialize CSS framework’s Autocomplete widget didn’t work properly with AJAX calls. So I gave it a go myself.

Ideally, the autocomplete widget should have the following features.

  • AJAX calls must be made only after a certain minimum number of characters are entered.
  • Requests must not be sent until the user stops typing into the box. This means setting a reasonable timeout to check end of typing.
  • If a request is already on its way when the user enters more characters, the existing request must be cancelled before sending a new one.
  • Clicking a result or outside the results list must close the list.
  • Certain keys should not trigger AJAX calls.
  • The results must be scrollable with arrow keys and selectable with Enter.

The code looks something like this. A few important things are explained below it.

Read More Read More