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.
(more…)