Home > ASP.Net, jQuery > jQuery AutoComplete Control

jQuery AutoComplete Control

In this post I am going to explain the steps required to use jQuery type ahead control.

Autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. Dependencies include jQuery.UI.core and jQuery.UI.widget

STEP1: Including required js files

<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>

STEP2: HTML entries

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

STEP3: 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(/\/g, '');
         stringValue = stringValue.replace(/\/g, '');
         $("#txtEmployeeName").val(stringValue);
         return false;
      },
      minLength: 3,
      select: function (event, ui) {
         var stringValue = ui.item.label;
         stringValue = stringValue.replace(/\/g, '');
         stringValue = stringValue.replace(/\/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");
      }
  }
);
Advertisements
Categories: ASP.Net, jQuery
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s