Adding auto-suggest functionality to a textbox

Perhaps the simplest example of explaining auto-suggest is the Google homepage. When you type a query in the search box, it displays a list of queries beneath it by matching your search terms.

We will create an example with the same functionality where text entered by the user will be matched against user names in a table and matching results will be displayed to the user in the form of a list just below the textbox in form of suggestions. The user will be able to use arrow keys to navigate up or down in a list and select a name from the list.

Getting ready

Create a folder named Recipe6 inside the Chapter8 directory. To be able to match user input with the database, we will require a table. Open phpMyAdmin and create a new table named users with the following structure and data:

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(32) NOT NULL,
  `password` varchar(32) NOT NULL,
  PRIMARY KEY (`id`)
);


INSERT INTO...