Materialize CSS Autocomplete with AJAX

info_outline

Please enable loading scripts from other sources for proper functionality. You will be prompted to enable them once you type more than 3 letters in the search box. (If on Chrome browser, check the end of the Address Bar)

This is a demonstration on how to make an autocomplete dropdown that fetches data from a server as the user types. You can read the full article here.


Try typing a few queries related to mobile phones.

Eg: Nokia, Apple, RAM, Android


Here, the search box queries www.gsmarena.com for news articles as the user gives input. When the user stops typing, an AJAX request is made which fetches data from the servers and then they are presented in a drop-down. Note that in this case the drop-down list items have been made into links to the relevant news posts.

Code