How to Create a jquery-ui Autocomplete Step by Step

Autocomplete is one of the most important parts of modern rich web
interface. Actually, you can create an autocomplete, using an AJAX call to
build
a list (server side) and afterwards to display the list using javascript
(usually below autocomplete input).
However,
there are many tools to create it the easy way.

The most robust and efficient tool to create an autocomplete is jquery and jquery-ui. Autocomplete
widget of jquery-ui is available here.

Of course, there are many other open source or commercial tools available.
Twitter
typeahead is probably the most important open source alternative.

In this tutorial I will create an autocomplete from the post titles of this
blog. When user types some characters in the relevant input, a list with
titles matching given term automatically appears. This autocomplete widget
has the following
properties:

full working demo is available (see after next paragraph)

php and mysqli are used as server side technologies

ability to search for more than one terms separated by space (so if you
give the
term "php mysql" it will return the post titles containing
both "php" and "mysql")

highlight results (given term is highlighted inside blog post title)

scroll results

display an animated image as ajax indicator (just while server side
database search occurs, afterwards it will disappear)

it accepts unicode letter and digit, underscore and dash. Other
characters are excluded from user input to avoid possible SQL
injection or
XSS attacks

prepared statements will be used to increase security (a version withour
prepared statements is also provided)

How it works

term in query string

When user types a string in autocomplete input, an AJAX call is created to
source property (in our example autocomplete.php) with
a parameter named "term" in query string. For example if you type
"mysql" the following AJAX call is fired:

So, autocomplete.php will create and return as JSON the data
required for the autocomplete list.

autocomplete list attributes

Displayed autocomplete list supports various attributes, the most important
of them are

id is the id of the li element

value is the value of the autocomplete input (moving from each li
items to another using mouse or keyboard arrows)

label is what li item displays (html is not supported by
default. You need an extension for this)

JSON data

So, when user types "mysql" in autocomplete input, the AJAX call
autocomplete.php?term=mysql creates and returns the following JSON
data

[
{
"id": "mysql-in-a-nutshell",
"value": "MySQL in a Nutshell",
"label": "<span class=\"hl_results\">MySQL</span> in a Nutshell"
},
{
"id": "how-to-use-php-improved-mysqli-extension-and-why-you-should",
"value": "How to Use PHP Improved MySQLi extension (and Why You Should)",
"label": "How to Use PHP Improved <span class=\"hl_results\">MySQL</span>i extension (and Why You Should)"
},
{
"id": "is-it-time-to-remove-mysql-in-favor-of-mariadb-in-production-servers",
"value": "Is it time to Remove MySQL in favor of MariaDB in Production Servers?",
"label": "Is it time to Remove <span class=\"hl_results\">MySQL</span> in favor of MariaDB in Production Servers?"
}
]

In this example I am using the post URL as "id", so after selection
(select method) a redirect to selected URL occurs. Of course, you
may use "id" (or other attributes) in any way, according to your
needs. A common practice is to store the id value to a hidden input (for later use) when user
selects a list item from autocomplete.

The DEMO

Please type some queries, like "how", "how to", "php",
"mysql" or any other to see the results. Give a common string like
"to" to view vertical scrollbar

The HTML part

page HEAD

Of course, you will need jquery and jquery-ui. jquery-ui autocomplete does
not support html by default. If you want to use html option
to highlight results, get jquery.ui.autocomplete.html.js from here.

autocomplete.css is a local css file to customize display.

autocomplete.js is the javascript file which contains the
javascript code to turn an input field to autocomplete widget.

Your comments are
welcomed!

This site actively encourages commenting on any post.
Comments are
not pre-moderated, but this community does not tolerate
direct or
indirect attacks, name-calling or insults. Please, read
terms of use
and Comment Policy at privacy
policy.