Autocomplete

As part of a new UI library, I have put together an autocomplete feature using the jQuery UI Autocomplete in a manner that follows the guidelines found in the Webgrown Solutions UI Manifesto. The Autocomplete supports the following features:

• Load suggestions from remote service.
• Can set delay on remote call to avoid producing a lot of load for remote data, and being less responsive.
• Can set minimum character needed to make remote call, to avoid large, timely results.
• Simple item display option.
• Templated item display option, which allows for the display of multiple data values for each item.
• Ability to specify which of the multiple data values to use when populating the field on select.
• Optional highlighting of search term in results (uses <mark> tag).
• Optional function call on select.
• UI Manifesto compliance:
  • Loosely Coupled Markup
  • Functional Flexibility
  • Simple Implementation

The Demo

Simple Display, With No Highlighting

Person:

Simple Display, With Highlighting

Person:

Templated Display, With No Highlighting

Person:

Templated Display, With Highlighting & Select Action

A google search will be made on the person name selected.

Person:

The Markup

Just a basic page <input type="text"> element, with a normal class attribute and some custom data (data-*) attributes to allow feature customization. Once the CSS and Script stuff are in place on a website, any page can implement the Autocomplete by simply setting the input element with the class attribute to "autocomplete", and setting the desired custom data attributes.

That sounds like a DRY solution to me (see UI Manifesto).

<h3>Simple Display, With No Highlighting</h3>
<p>
    <label for="txtAutocompleteDemo1">Person:</label> 
    <input type="text" id="txtAutocompleteDemo1" class="autocomplete"
        data-serviceRequestUrl="/WebServices/DemoClientService.svc/PersonAutocomplete1"
        data-serviceRequestDelay="300"
        data-serviceRequestMinLength="2"
        data-highlightMatches="false" />
</p>
<h3>Simple Display, With Highlighting</h3>
<p>
    <label for="txtAutocompleteDemo2">Person:</label> 
    <input type="text" id="txtAutocompleteDemo2" class="autocomplete"
        data-serviceRequestUrl="/WebServices/DemoClientService.svc/PersonAutocomplete1"
        data-serviceRequestDelay="300"
        data-serviceRequestMinLength="2"
        data-highlightMatches="true" />
</p>
<h3>Templated Display, With No Highlighting</h3>
<p>
    <script id="personTemplate" type="text/x-jquery-tmpl">
        <div class="itemName">${FullName}</div>
        <div class="itemDetails">${City}, ${StateAbbreviated} ${ZipCode}</div>
    </script>
    <label for="txtAutocompleteDemo3">Person:</label> 
    <input type="text" id="txtAutocompleteDemo3" class="autocomplete"
        data-serviceRequestUrl="/WebServices/DemoClientService.svc/PersonAutocomplete2"
        data-serviceRequestDelay="300"
        data-serviceRequestMinLength="2"
        data-itemTemplateId="personTemplate"
        data-propertyToUseOnSelect="FullName"
        data-highlightMatches="false" />
</p>
<h3>Templated Display, With Highlighting & Select Action</h3>
<p>A google search will be made on the person name selected.</p>
    <label for="txtAutocompleteDemo4">Person:</label> 
    <input type="text" id="txtAutocompleteDemo4" class="autocomplete"
        data-serviceRequestUrl="/WebServices/DemoClientService.svc/PersonAutocomplete2"
        data-serviceRequestDelay="300"
        data-serviceRequestMinLength="2"
        data-itemTemplateId="personTemplate"
        data-propertyToUseOnSelect="FullName"
        data-highlightMatches="true"
        data-selectActionFunction="googlePerson" />
</p>

Not shown to the general public.
        

Not shown to the general public.
        

In addition to the markup, CSS, and JavaScript code samples found below the demo, the following resources/files are required:

• jQuery (current release)
• jQuery UI
  (must include Autocomplete widget, with its dependencies)