Tobago Demo

Menu

Suggest

A <tc:suggest/> tag can be added to an input field to make suggestions based on the already entered text.

Tag Library Documentation: <tc:suggest/> | <tc:in/> | <tc:selectItems/>

Basics

After you type a character in the textfield, a list of suggestions is shown.

If update="true" the attribute totalCount should be set to improve performance. It set the amount of items loaded from the server.

The suggestion list is calculated in the controller. User the query attribute to pass the query string to the controller.

<tc:in id="inBasic"> <tc:suggest totalCount="10" query="#{suggestController.query}"> <tc:selectItems value="#{suggestController.solarObjects}" var="name" itemValue="#{name}"/> </tc:suggest> </tc:in>

Maximum Items

The attribute maximumItems is here set to 5 to limit the list of matching items. The default value is 10.

Delay

The attribute delay (in milliseconds) is here set to 2000 to set the waiting time to 2 seconds, before the list is shown. The default value is 200.

Minimum Characters

The attribute minimumCharacters is here set to 2. You need to type at least 2 charaters before the list is shown. The default value is 1.

The attribute minimumCharacters is here set to 0. In this case the list will shown at focus of the field.

Client side

Filtering can also be done by the client. For that, set update="false".

If client side, you can also use <tc:selectItem/> instead of <tc:selectItems/>.

<tc:suggest update="false"/>

Render local menu

By default, the suggest menu is rendered in the .tobago-page-menuStore and positioned relative to the page. The suggest menu will be scrolled with the page.

Sometimes this behavior causes problems. For example if tc:suggest is used in a fixed header. In this case the suggest menu must not scroll with the page. Instead it should stick on the input component.

To render a suggest menu local on the component, the attribute localMenu can be used.

© 2005-2023 Apache Software Foundation, Licensed under the Apache License, Version 2.0.