JUICE UI

Supercharge ASP.NET
Web Forms with jQuery UI

autocomplete

Interaction — Extends a Textbox or Input control to provide Autocomplete functionality for the user.

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.

By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

This can be used to enter previous selected values, for example you could use Autocomplete for entering tags, to complete an address, you could enter a city name and get the zip code, or maybe enter email addresses from an address book.

You can pull data in from a local and/or a remote source: Local is good for small data sets (like an address book with 50 entries), remote is necessary for big data sets, like a database with hundreds or millions of entries to select from.

Autocomplete can be customized to work with various data sources, by just specifying the source option. A data source can be:

  • an Array with local data
  • a String, specifying a URL

Expected data format

The data from local data, a url or a callback can come in two variants:

  • An Array of Strings:
    [ "Choice1", "Choice2" ]
  • An Array of Objects with label and value properties:
    [ { label: "Choice1", value: "value1" }, ... ]

The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu. If just one property is specified, it will be used for both, eg. if you provide only value-properties, the value will also be used as the label.

When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The Autocomplete plugin does not filter the results, instead the request parameter "term" gets added to the URL, which the server-side script should use for filtering the results. The data itself can be in the same format as the local data described above.

Examples

Default Functionality

<!-- uncomment for a scrollable list
<style>
.ui-autocomplete {
	max-height: 100px;
	overflow-y: auto;
	overflow-x: hidden; /* prevent horizontal scrollbar */
	padding-right: 20px; /* add padding to account for vertical scrollbar */
}
</style>-->

<label for="_Default">Tags: </label>
<asp:TextBox runat="server" ID="_Default" ClientIDMode="Static" />
  
<Juice:Autocomplete runat="server" TargetControlID="_Default" Source="ActionScript, AppleScript, Asp, BASIC, C, C++, Clojure, COBOL, ColdFusion, Erlang, Fortran, Groovy, Haskell, Java, JavaScript, Lisp, Perl, PHP, Python, Ruby, Scala, Scheme" />

Properties

Events

All events are currently of the type EventHandler. The "sender" parameter is a reference to the control, and should be cast appropriately to access the widget's properties and methods.