jQuery AutoComplete Control

Autocomplete, when added to an input field, lets users quickly find and select from a list of values as they type, using searching and filtering. This post walks through the steps to set up the jQuery UI type ahead control.

It depends on jQuery UI core and jQuery UI widget.

Step 1: include the script files

html

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="/js/jquery.ui.widget.js"></script>

Step 2: add the HTML

A textbox for typing and a hidden field for the selected id. Typing clears the id so a stale value is never kept.

html

<input type="text" id="txtEmployeeName" onkeypress="$('#employeeId').val('');" />
<input type="hidden" id="employeeId" />

Step 3: add the jQuery code

$(function () {
    $("#txtEmployeeName").autocomplete({
        source: function (request, response) {
            var getUrl = "/SomeWCFService/Employees?" +
                "$filter=substringof('" + request.term + "',EmployeeName) eq true" +
                "&$orderby=EmployeeName";
            $.ajax({
                url: getUrl,
                type: "GET",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 10
                },
                dataFilter: function (data, type) {
                    return data.replace(/\\'/g, "'");
                },
                success: function (data) {
                    response($.map(data.d, function (result) {
                        return {
                            label: result.EmployeeName,
                            value: result.ClientId
                        };
                    }));
                }
            });
        },
        focus: function (event, ui) {
            var stringValue = ui.item.label;
            stringValue = stringValue.replace(/<strong>/g, '');
            stringValue = stringValue.replace(/<\/strong>/g, '');
            $("#txtEmployeeName").val(stringValue);
            return false;
        },
        minLength: 3,
        select: function (event, ui) {
            var stringValue = ui.item.label;
            stringValue = stringValue.replace(/<strong>/g, '');
            stringValue = stringValue.replace(/<\/strong>/g, '');
            $("#txtEmployeeName").val(stringValue);
            $("#employeeId").val(ui.item.value);
            return false;
        },
        open: function () {
            $("#txtEmployeeName").removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function () {
            $("#txtEmployeeName").removeClass("ui-corner-top").addClass("ui-corner-all");
        }
    });
});

The source function calls the service with what the user has typed. After three characters (minLength) it shows the matching names. When the user picks one, the name goes in the textbox and the id goes in the hidden field.