jQuery UI Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.

jQuery UI Autocomplete can be applied on any input field, in other words any HTML field of type <input> or on a textarea, in other words <textarea>.

How does jQuery UI Autocomplete help?

It helps to do the intellisense or to display the available options to the user for a particular input field. Basically it acts as a plugin when integrated with any TextBox. Start searching for the matching records (filtering the records from the available or the provided source) and display it to the user for the selection. The user can filter the records for better matches by entering more precise values. It also helps in achieving some functionality like, on entering a specific zip code something is automatically filled in. The data source for the autocomplete can be local (present on the client side) or it can be remote (present on the server for example database).

Autocomplete also provides the user interaction with the list via the keyboard also. So basically the user can move up and down using arrow keys.

Applying styles on the Autocomplete box and the selection list

One can also customize the look and feel of the autocomplete TextBox and the selection list. By default the jQuery UI CSS styles are used and one can modify them by extending the CSS classes (by extending I mean overwriting the styles in the applied classes).
Various functionalities and properties (some of the frequently used properties) exposed by jQuery UI Autocomplete are:

Various Methods exposed by jQuery UI Autocomplete

Some methods available help in controlling the selection list via script (in other words JavaScript or jQuery scripting). I will not go into too much details of it since they are self-explanatory (by their names) and not used very frequently since one rarely needs to play around with the Autocomplete box via script.

Various Events exposed or triggered by jQuery UI Autocomplete

These events will help one in achieving custom functionalities or to do something on the back end when the user starts playing (or using) the control.

This is most of the details of the jQuery UI Autocomplete; I think we can now go into the technical details of how we can implement it. I am a guy from the .Net background (using C#), so I am sorry but my implementation examples somehow will be in the same technology or language (especially the server side code showing the remote search). But it doesn't mean that it will not work in Java Web forms (JSP) or may be some other pages. Here I will be presenting how it can be implemented in simple HTML pages.

Some of the prerequisites for using jQuery UI Autocomplete are:

One can also use the minified version of all of these or any other version (Just ensure that they are using the required version of the dependent library).

Example of Local Data Source

The HTML page complies with HTML5 standards.

HTML

<!doctype html>

<html>

<head>

<title>Local Data Source Sample</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript" language="javascript"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"

language="javascript"></script>

</head>

<body>

<input id="txtTest" type="text" />

</body>

<script type="text/javascript"

language="javascript">

$("#txtTest").autocomplete({

source: ["Test Value 1", "Test Value 2", "Test Value 3", "Unique Value"]

});

</script>

</html>

Screenshot of the running sample:

jQuery-UI-Autocomplete-1.jpg
This is a very simple example with the static data source.

Example of Remote Data Source

Here I will show you the use of some of the properties and events of the Autocomplete. We will make an AJAX request on the server to get the data during runtime in JSON format. Values from the client will be passed in the form of a query string and a HTTP Handler will be created to serve the request.

HTML

<!doctype html>

<html>

<head>

<title>Remote Data Source Sample</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript" language="javascript"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"

language="javascript"></script>

</head>

<body>

<input id="txtTest" type="text" />

</body>

<script type="text/javascript" language="javascript">

$("#txtTest").autocomplete({

source: function (request, response) {

$.ajax({

url: "/default.Test", //Request is being made to the handler for extension test

dataType: "json",

data: {

term: request.term//You can also send more query string parameters here seperated by comma. request.term will send the value present in the textbox

},

success: function (data) {

if (data != null && data != '') {

response($.map(data, function (item) {

return {

label: item.FirstName + ' ' + item.LastName,

value: item.FirstName + ' ' + item.LastName //You can add more properties here

};

}));

} else {

$('ul[class*=ui-autocomplete]').hide();

}

}

});

},

minLength: 3,

cache: false,

select: function (event, ui) {

if (ui != null && ui.item != null) {

$("#txtTest").val(ui.item.value);

}

//The below code is written to prevent the execution of default button functionality on press of ENTER key

var code = (event.keyCode ? event.keyCode : event.which);

if (code == 13) {

event.preventDefault();

event.stopPropagation();

}

return false;

}

});

</script>

</html>


The sample is to get the users from the server and to show their first name and the last name in the selection list of autocomplete.

In the preceding sample you can see that the source is a function in which we are making an AJAX GET request to get the data from the server in JSON format. An AJAX request is being made to the HTTP Handler with extension "*.Test". The value that the user entered in the TextBox is passed as a query string parameter "term" and "request.term" helps us in getting the value present in the TextBox and to send it to the server. If the Request is successful and we receive some data from the server then we return the array of objects (the objects contain two properties as we discussed earlier, "label" and "value", as of now both of these properties contain the first name and the last name separated by a space).

I have used three properties and an event in the sample above.

Cache is the property that helps in specifying that if the request needs to be made on the server again to get the data, or it can be served locally. So suppose there is a user "Abhishek Jain". If the user enters "abh" for the first time then the server hit is made sending "abh" in the term query string and gets the data. There is one suggested user "Abhishek Jain". Now if the user deletes "abh" and enters something else then another request will be made to the server, but if the user enters "abh" again in the TextBox then the server hit is not made and the data that was fetched initially for "abh" will be shown. Other properties that I mentioned above can also be used in a similar way.

I will now explain how to create a HTTP Handler. Before starting it one should understand what a HTTP Handler is and why I have created a handler in this case.

HTTP Handler

HttpHandler is an extension-based processor, in other words pre-processing logic is executed depending on file extensions. So any request coming to the server for a particular file extension will be served a particular handler for that extension. We can also create custom HTTP handlers to serve our request for a special extension. HTTP Handlers can be synchronous or asynchronous. My example will focus on how to create an Asynchronous HTTP handler.

Why I Created a HTTP Handler

Actually I wanted to make an server request, either I can make it to a Web Method included in some page, or I can make that request to some service endpoint to get the data in JSON format, or, as I have chosen to, create a HTTP handler to serve my request. My motivation behind this is that whenever I want a similar kind of Autocomplete box, I create a user control with this functionality so in any application of mine that I want a similar behaviour I can use that control and can just register this HTTP Handler for that side and the Autocomplete control will be running with the same functionality, although it can also be done using Web Services or any other services but that will be a time-consuming task and I don't prefer to create a service just to return data for a autocomplete TextBox.

How to create a HTTP Handler (specific to .Net)

First of all create a class defining the handler. In my scenario suppose "TestHandler.cs". Now inherit that class from an interface "IHttpHandler" but in my case since I want an asynchronous HTTP handler I will inherit it from "IHTTPAsyncHandler". `Now here I need to implement three methods, two from IHttpAsyncHandler, in other words BeginProcessRequest and EndProcessRequest and the third one from IHttpHandler, in other words ProcessRequest. This class will actually be creating a new operation instance (Operation is the entity that will actually be accomplishing the task and returning the result). I will explain in the next block how to create an Operation class or Entity. The Handler class will look like:

public class TestHandler : IHttpAsyncHandler

{

#region Public Members

/// <summary>

/// Is reusable property of the handler

/// </summary>

public bool IsReusable { get { return false; } }

#endregion

#region IHttpAsyncHandler Members

/// <summary>

/// begin process request event fired on the starting of the handler request

/// </summary>

/// <param name="httpContext"></param>

/// <param name="asyncCallback"></param>

/// <param name="extraData"></param>

/// <returns></returns>

public IAsyncResult BeginProcessRequest(HttpContext httpContext, AsyncCallback asyncCallback, Object extraData)

{

IAsyncResult handlerResult = null;

//Checks if the user is an authenticated user

if (httpContext != null && httpContext.User != null && httpContext.User.Identity != null && httpContext.User.Identity.IsAuthenticated)

{

//Instance of Operation entity which will actually be accomplishing the task

TestOperation testOperation = new TestOperation(asyncCallback, httpContext, extraData);

testOperation.StartAsyncWork();

handlerResult = testOperation;

}

return handlerResult;

}

/// <summary>

/// end process request event fired on the end of the handler request

/// </summary>

/// <param name="result"></param>

public void EndProcessRequest(IAsyncResult result)

{

}

#endregion

#region IHttpHandler Members

/// <summary>

/// Process Request, handle something which needs to be done on http contect request processing

/// </summary>

/// <param name="context"></param>

public void ProcessRequest(HttpContext context)

{

}

#endregion

}

If you want more details of the methods and properties that are present in this class then please refer to the MSDN. This is out of the scope of my article.

Now I will create an Operation class that looks like this:

public class TestOperation : IAsyncResult

{

#region Private Members

private bool completed;

private Object state;

private AsyncCallback callback;

private HttpContext context;

bool IAsyncResult.IsCompleted { get { return completed; } }

WaitHandle IAsyncResult.AsyncWaitHandle { get { return null; } }

Object IAsyncResult.AsyncState { get { return state; } }

bool IAsyncResult.CompletedSynchronously { get { return false; } }

#endregion

#region CTOR

/// <summary>

/// Test operation constructor

/// </summary>

/// <param name="asyncCallback"></param>

/// <param name="httpContext"></param>

/// <param name="objectState"></param>

public TestOperation(AsyncCallback asyncCallback, HttpContext httpContext, Object objectState)

{

callback = asyncCallback;

context = httpContext;

state = objectState;

completed = false;

}

#endregion

#region Public Methods

/// <summary>

/// Starts Asynchronous work

/// </summary>

public void StartAsyncWork()

{

ThreadPool.QueueUserWorkItem(new WaitCallback(StartAsyncTask), null);

}

#endregion

#region Private Methods

/// <summary>

/// Starts the actual task

/// </summary>

/// <param name="workItemState"></param>

private void StartAsyncTask(Object workItemState)

{

context.Response.ContentType = "application/json";

context.Response.ContentEncoding = Encoding.UTF8;

string searchBy = context.Request.QueryString["term"] != null ?

context.Request.QueryString["term"] : string.Empty;

string result = string.Empty;//Result string which will contain the result in JSON format

//Get the data from the database or some other data source (Either get the filtered data using searchBy string or filter it here by using searchBy string)

context.Response.Write(result);

completed = true;

callback(this);

}

#endregion

}

With this we are done with the creation of the handler, now build the project in which these two classes are present (a DLL will be created that we will mention while registering the handler for a particular site on the server).

Registration of the created handler on a particular site

There are two ways of registering it as in the following:

Registering a Handler on IIS

Open IIS, select your site under it and for that particular site open the "Handler Mapping" section and click on "Add Managed Handler".

jQuery-UI-Autocomplete-2.jpg
jQuery-UI-Autocomplete-3.jpg

By this <Namespace> I mean the full namespace of that class if any.

jQuery-UI-Autocomplete-4.jpg

Registration via Web.Config

Open up the web.config file and make the following handler mapping in the Handler section:

<system.webServer>

<handlers>

<add name="TestHandler" path="*.Test" verb="*" type=""<Namespace>.TestHandler" preCondition="integratedMode" />

</handlers>

</system.webServer>


One this is done we are good to go and one will see the Autocomplete working with the Data from the server.