Tobago Demo

Menu

Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sheet Sorting Paginator Sheet Column Selector Sheet Selectionchange Sheet Event Sheet Action Sheet Markup Sheet Style Empty Sheet Column Bar Sheet Filter Sheet Static Header Sheet Multi Header Sheet Tree Column Panel Sheet Editable Sheet Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta
Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sheet Sorting Paginator Sheet Column Selector Sheet Selectionchange Sheet Event Sheet Action Sheet Markup Sheet Style Empty Sheet Column Bar Sheet Filter Sheet Static Header Sheet Multi Header Sheet Tree Column Panel Sheet Editable Sheet Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta

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-2025 Apache Software Foundation, Licensed under the Apache License, Version 2.0.