Get Loom

Autocompleter

The autocompleter tag is an enhanced inputText that includes information to create your favorite kind of autocompleter.

Component snapshot

Autocompleters can pull values from a list included in the web page (local autocompleter) or using Ajax.

Local Autocompleter

This autocompleter includes the list of possible values in the same web page, which is a good idea if the number of options is small:

Include a method like this in the action class:

@Autocompleted(propertyName="name")
private Customer referencedBy;

/**
 * @return a list of candidates for inline autocompletion
 */
public List getInlineAutocompletionCandidates() {
	return entityManager.findAll(Customer.class);
}

The jsp page:

<a:autocompleter id="referenced" options="${action.inlineAutocompletionCandidates}" name="referencedBy" />

The options attribute can be set to a List of String or a list of the same object class that will be injected (in this case, the Customer class). In the last case the field should be annotated with @Autocompleted and you should add a converter to your spring config:

<bean class="org.loom.addons.autocompleter.AutocompletedConverter" 
  p:transactionalService-ref="transactionalService" 
  scope="prototype"
/>

With this configuration, the value of referencedBy will be automatically filled by querying the database for a "Customer.lastName" value, using the value submitted by the autocompleter field of the form.

Ajax Autocompleter

An Autocompleter that will ask for a list of values after each keypress, using Ajax. In this example, we will be using a multiple autocompleter where several values can be introduced separated by commas, semicolons or spaces.

The JSP page:

<a:autocompleter id="friendsAndFamily" name="friendsAndFamily" 
	action="Customers" event="getAjaxAutocompletionCandidates" 
/>

<script>
  loom.ui.createAutocompleter("friendsAndFamily", { paramName: "filterName", tokens: [',',';',' '] });
</script>

The Action class:

	@Autocompleted(propertyName="lastName", separatorTokens=",; ")
	private Set friendsAndFamily;

	public Resolution getAjaxAutocompletionCandidates() {
		List customers = transactionalService.find("select c from Customer c where upper(c.lastName) like ?1", 
				'%' + filterName.toUpperCase() + '%');
		
		AutocompleteResolution resolution = new AutocompleteResolution(filterName);		
		for (Iterator iterator = customers.iterator(); iterator.hasNext();) {
			Customer customer = iterator.next();
			resolution.add(customer.getLastName());
		}		
		return resolution;
	}

The spring file:

<bean class="org.loom.addons.autocompleter.MultipleAutocompletedConverter" 
  p:transactionalService-ref="transactionalService" 
  scope="prototype"
/>

AutocompleteResolution will include any result that gets added into a HTML unordered list, highlighting the sections that are a match.