#{extends 'jqueryui/layout.html'/} #{set title:'Autocomplete'/} #{set 'moreScripts'} #{/set}
Use a label-only autocomplete widget to suggest text values for an input field.
Type to populate the list, and select a label from the list.
The widget is based on the the following input
element, using the data-url
attribute value
for the server-side data source.
<input name="location" class="autocomplete" data-url="@{jqueryui.Autocomplete.label()}">
The autocomplete.js
JavaScript applies the jQuery UI autocomplete plug-in to the input
element.
#{includeVerbatim '/public/javascripts/autocomplete.js'/}
The jqueryui.Autocomplete.label(String term)
action renders a JSON-encoded list of strings that match
the user-entered term
parameter.
${label}
Note that there is no view template, because renderJSON
renders a response directly.
Use a label/value autocomplete to suggest input options that have a separate label and value.
The HTML input is almost the same as the example above, except that the form control name is different, because the submitted value will be an ID value instead of a string label.
<input name="location.id" class="autocomplete-value"
data-url="@{jqueryui.Autocomplete.value()}">
This client implementation uses more JavaScript in autocomplete-value.js
to handle label/value pairs,
with an additional hidden field in the form.
#{includeVerbatim '/public/javascripts/autocomplete-value.js'/}
The jqueryui.Autocomplete.value(String term)
action renders a JSON-encoded list of label/value pairs
that match the user-entered term
parameter.
${value}
#{includeVerbatim '/app/models/jqueryui/AutocompleteValue.java'/}