Tag: Web Development

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