gwt.material.design.addins.client.autocomplete

Class MaterialAutoComplete

java.lang.Object

com.google.gwt.user.client.ui.UIObject

com.google.gwt.user.client.ui.Widget

com.google.gwt.user.client.ui.Panel

com.google.gwt.user.client.ui.ComplexPanel

gwt.material.design.client.base.MaterialWidget

gwt.material.design.addins.client.autocomplete.MaterialAutoComplete

All Implemented Interfaces:

com.google.gwt.event.dom.client.HasKeyUpHandlers, com.google.gwt.event.logical.shared.HasAttachHandlers, com.google.gwt.event.logical.shared.HasSelectionHandlers<com.google.gwt.user.client.ui.SuggestOracle.Suggestion>, com.google.gwt.event.logical.shared.HasValueChangeHandlers<List<? extends com.google.gwt.user.client.ui.SuggestOracle.Suggestion>>, com.google.gwt.event.shared.HasHandlers, com.google.gwt.user.client.EventListener, com.google.gwt.user.client.TakesValue<List<? extends com.google.gwt.user.client.ui.SuggestOracle.Suggestion>>, com.google.gwt.user.client.ui.Focusable, com.google.gwt.user.client.ui.HasEnabled, com.google.gwt.user.client.ui.HasValue<List<? extends com.google.gwt.user.client.ui.SuggestOracle.Suggestion>>, com.google.gwt.user.client.ui.HasVisibility, com.google.gwt.user.client.ui.HasWidgets, com.google.gwt.user.client.ui.HasWidgets.ForIsWidget, com.google.gwt.user.client.ui.IndexedPanel, com.google.gwt.user.client.ui.IndexedPanel.ForIsWidget, com.google.gwt.user.client.ui.IsWidget, gwt.material.design.client.base.HasCenterOn, gwt.material.design.client.base.HasCircle, gwt.material.design.client.base.HasColors, gwt.material.design.client.base.HasDataAttributes, gwt.material.design.client.base.HasDepth, gwt.material.design.client.base.HasError, gwt.material.design.client.base.HasFlexbox, gwt.material.design.client.base.HasFloat, gwt.material.design.client.base.HasFontSize, gwt.material.design.client.base.HasFontWeight, gwt.material.design.client.base.HasGrid, gwt.material.design.client.base.HasHideOn, gwt.material.design.client.base.HasHoverable, gwt.material.design.client.base.HasId, gwt.material.design.client.base.HasInitialClasses, gwt.material.design.client.base.HasInlineStyle, gwt.material.design.client.base.HasOpacity, gwt.material.design.client.base.HasPlaceholder, gwt.material.design.client.base.HasProgress, gwt.material.design.client.base.HasScrollspy, gwt.material.design.client.base.HasSeparator, gwt.material.design.client.base.HasShadow, gwt.material.design.client.base.HasShowOn, gwt.material.design.client.base.HasTextAlign, gwt.material.design.client.base.HasTooltip, gwt.material.design.client.base.HasType<AutocompleteType>, gwt.material.design.client.base.HasWaves, Iterable<com.google.gwt.user.client.ui.Widget>

public class MaterialAutoComplete
extends gwt.material.design.client.base.MaterialWidget
implements gwt.material.design.client.base.HasError, gwt.material.design.client.base.HasPlaceholder, com.google.gwt.user.client.ui.HasValue<List<? extends com.google.gwt.user.client.ui.SuggestOracle.Suggestion>>, gwt.material.design.client.base.HasProgress, com.google.gwt.event.dom.client.HasKeyUpHandlers, gwt.material.design.client.base.HasType<AutocompleteType>, com.google.gwt.event.logical.shared.HasSelectionHandlers<com.google.gwt.user.client.ui.SuggestOracle.Suggestion>

Use GWT Autocomplete to search for matches from local or remote data sources. We used MultiWordSuggestOracle to populate the list to be added on the autocomplete values.

XML Namespace Declaration

 
 xmlns:ma='urn:import:gwt.material.design.addins.client'
 
 

UiBinder Usage:

 
  <ma:autocomplete.MaterialAutoComplete ui:field="autocomplete" placeholder="States" />
 

Java Usage:

To use your domain object inside the MaterialAutoComplete, for example, an object "User", you can subclass the MaterialSuggestionOracle and SuggestOracle.Suggestion, like this:

 public class UserOracle extends MaterialSuggestionOracle {
     private List<User> contacts = new LinkedList<>();

     public void addContacts(List<User> users){
         contacts.addAll(users);
     }

      @Override
     public void requestSuggestions(final Request request, final Callback callback) {
         Response resp = new Response();
         if (contacts.isEmpty()){
             callback.onSuggestionsReady(request, resp);
             return;
         }
         String text = request.getQuery();
         text = text.toLowerCase();

         List<UserSuggestion> list = new ArrayList<>();

         / *
          *  Finds the contacts that meets the criteria. Note that since the
          *  requestSuggestions method is asynchronous, you can fetch the
          *  results from the server instead of using a local contacts List.
          */
         for (User contact : contacts){
             if (contact.getName().toLowerCase().contains(text)){
                 list.add(new UserSuggestion(contact));
             }
          }
          resp.setSuggestions(list);
          callback.onSuggestionsReady(request, resp);
     }
 }

 public class UserSuggestion implements SuggestOracle.Suggestion {

     private User user;

     public UserSuggestion(User user){
         this.user = user;
     }

      @Override
     public String getDisplayString() {
         return getReplacementString();
     }

      @Override
     public String getReplacementString() {
         return user.getName();
     }

     public User getUser() {
         return user;
     }
 }
 

And then use the UserOracle like this:

 //Constructor
 MaterialAutoComplete userAutoComplete = new MaterialAutoComplete(new UserOracle());

 //How to get the selected User objects
 public List<User> getSelectedUsers(){
     List<? extends Suggestion> values = userAutoComplete.getValue();
     List<User> users = new ArrayList<>(values.size());
     for (Suggestion value : values) {
         if (value instanceof UserSuggestion){
             UserSuggestion us = (UserSuggestion) value;
             User user = us.getUser();
             users.add(user);
         }
     }
     return users;
 }
 

Author:

kevzlou7979, gilberto-torrezan

See Also:

Material AutoComplete

Nested Class Summary

Nested Classes

Modifier and Type	Class and Description
static class	MaterialAutoComplete.DefaultMaterialChipProvider Default implementation of the MaterialAutoComplete.MaterialChipProvider interface, used by the MaterialAutoComplete.
static interface	MaterialAutoComplete.MaterialChipProvider Interface that defines how a MaterialChip is created, given a SuggestOracle.Suggestion.

Nested classes/interfaces inherited from class gwt.material.design.client.base.MaterialWidget

gwt.material.design.client.base.MaterialWidget.Feature

Nested classes/interfaces inherited from class com.google.gwt.user.client.ui.UIObject

com.google.gwt.user.client.ui.UIObject.DebugIdImpl, com.google.gwt.user.client.ui.UIObject.DebugIdImplEnabled

Nested classes/interfaces inherited from interface com.google.gwt.user.client.ui.IndexedPanel

com.google.gwt.user.client.ui.IndexedPanel.ForIsWidget

Nested classes/interfaces inherited from interface com.google.gwt.user.client.ui.HasWidgets

com.google.gwt.user.client.ui.HasWidgets.ForIsWidget

Field Summary

Fields

Modifier and Type	Field and Description
gwt.material.design.client.base.mixin.CssTypeMixin<AutocompleteType,MaterialAutoComplete>	typeMixin

Fields inherited from class com.google.gwt.user.client.ui.UIObject

DEBUG_ID_PREFIX

Constructor Summary

Constructors

Constructor and Description
MaterialAutoComplete() Use MaterialAutocomplete to search for matches from local or remote data sources.
MaterialAutoComplete(AutocompleteType type)
MaterialAutoComplete(com.google.gwt.user.client.ui.SuggestOracle suggestions) Use MaterialAutocomplete to search for matches from local or remote data sources.

Method Summary

Modifier and Type	Method and Description
protected boolean	addItem(com.google.gwt.user.client.ui.SuggestOracle.Suggestion suggestion) Adding the item value using Material Chips added on auto complete box
com.google.gwt.event.shared.HandlerRegistration	addKeyUpHandler(com.google.gwt.event.dom.client.KeyUpHandler handler)
com.google.gwt.event.shared.HandlerRegistration	addSelectionHandler(com.google.gwt.event.logical.shared.SelectionHandler<com.google.gwt.user.client.ui.SuggestOracle.Suggestion> handler)
com.google.gwt.event.shared.HandlerRegistration	addValueChangeHandler(com.google.gwt.event.logical.shared.ValueChangeHandler<List<? extends com.google.gwt.user.client.ui.SuggestOracle.Suggestion>> handler)
void	clear() Clear the chip items on the autocomplete box
void	clearErrorOrSuccess()
protected void	generateAutoComplete(com.google.gwt.user.client.ui.SuggestOracle suggestions) Generate and build the List Items to be set on Auto Complete box.
MaterialAutoComplete.MaterialChipProvider	getChipProvider() Gets the current MaterialAutoComplete.MaterialChipProvider.
protected gwt.material.design.client.base.mixin.FocusableMixin<gwt.material.design.client.base.MaterialWidget>	getFocusableMixin()
List<gwt.material.design.client.ui.html.ListItem>	getItemsHighlighted()
List<String>	getItemValues()
int	getLimit()
String	getPlaceholder()
String	getSelectedChipStyle() Returns the style class applied to chips when they are selected.
com.google.gwt.user.client.ui.SuggestOracle	getSuggestions()
AutocompleteType	getType()
List<? extends com.google.gwt.user.client.ui.SuggestOracle.Suggestion>	getValue() Returns the selected SuggestOracle.Suggestions.
void	hideProgress()
boolean	isDirectInputAllowed()
void	setChipProvider(MaterialAutoComplete.MaterialChipProvider chipProvider) Sets a MaterialAutoComplete.MaterialChipProvider that can customize how the MaterialChip is created for each selected SuggestOracle.Suggestion.
void	setDirectInputAllowed(boolean directInputAllowed) When set to false, only SuggestOracle.Suggestions from the SuggestionOracle are accepted.
void	setEnabled(boolean enabled)
void	setError(String error)
void	setHelperText(String helperText)
void	setItemsHighlighted(List<gwt.material.design.client.ui.html.ListItem> itemsHighlighted)
void	setItemValues(List<String> itemValues)
void	setLimit(int limit)
void	setPercent(double percent)
void	setPlaceholder(String placeholder)
void	setSelectedChipStyle(String selectedChipStyle) Sets the style class applied to chips when they are selected.
void	setSuccess(String success)
void	setSuggestions(com.google.gwt.user.client.ui.SuggestOracle suggestions) Sets the SuggestOracle to be used to provide suggestions.
void	setSuggestions(com.google.gwt.user.client.ui.SuggestOracle suggestions, AutocompleteType type)
void	setType(AutocompleteType type)
void	setValue(List<? extends com.google.gwt.user.client.ui.SuggestOracle.Suggestion> value)
void	setValue(List<? extends com.google.gwt.user.client.ui.SuggestOracle.Suggestion> value, boolean fireEvents)
void	showProgress(gwt.material.design.client.constants.ProgressType type)

Methods inherited from class gwt.material.design.client.base.MaterialWidget

add, add, clearActiveClass, enableFeature, getBackgroundColor, getCenterOn, getCenterOnMixin, getCircleMixin, getColorsMixin, getDataAttribute, getDepth, getEnabledMixin, getFlexboxMixin, getFloat, getFloatMixin, getFontSize, getFontSizeMixin, getFontWeight, getFontWeightMixin, getGridMixin, getHideOn, getHideOnMixin, getHoverableMixin, getId, getIdMixin, getInitialClasses, getOpacity, getScrollspy, getScrollspyMixin, getSeparatorMixin, getShadow, getShadowMixin, getShowOn, getShowOnMixin, getTabIndex, getTextAlign, getTextAlignMixin, getTextColor, getTooltip, getTooltipDelayMs, getTooltipMixin, getTooltipPosition, getTruncateMixin, getWaves, getWavesMixin, getWidth, getWidth, insert, insert, isCircle, isEnabled, isFeatureEnabled, isHoverable, isSeparator, onLoad, setAccessKey, setBackgroundColor, setBottom, setCenterOn, setCircle, setDataAttribute, setDepth, setDisplay, setFlex, setFlexAlignContent, setFlexAlignItems, setFlexAlignSelf, setFlexBasis, setFlexDirection, setFlexGrow, setFlexJustifyContent, setFlexOrder, setFlexShrink, setFlexWrap, setFloat, setFocus, setFontSize, setFontSize, setFontWeight, setGrid, setGwtDisplay, setHideOn, setHoverable, setId, setInitialClasses, setLayoutPosition, setLeft, setMargin, setMarginBottom, setMarginLeft, setMarginRight, setMarginTop, setOffset, setOpacity, setOverflow, setPadding, setPaddingBottom, setPaddingLeft, setPaddingRight, setPaddingTop, setRight, setScrollspy, setSeparator, setShadow, setShowOn, setTabIndex, setTextAlign, setTextColor, setTooltip, setTooltipDelayMs, setTooltipPosition, setTop, setTruncate, setVisibility, setWaves, stopTouchStartEvent, stopTouchStartEvent

Methods inherited from class com.google.gwt.user.client.ui.ComplexPanel

add, adjustIndex, checkIndexBoundsForAccess, checkIndexBoundsForInsertion, getChildren, getWidget, getWidgetCount, getWidgetIndex, getWidgetIndex, insert, iterator, remove, remove

Methods inherited from class com.google.gwt.user.client.ui.Panel

add, adopt, doAttachChildren, doDetachChildren, orphan, remove

Methods inherited from class com.google.gwt.user.client.ui.Widget

addAttachHandler, addBitlessDomHandler, addDomHandler, addHandler, asWidget, asWidgetOrNull, createHandlerManager, delegateEvent, fireEvent, getHandlerCount, getLayoutData, getParent, isAttached, isOrWasAttached, onAttach, onBrowserEvent, onDetach, onUnload, removeFromParent, setLayoutData, sinkEvents, unsinkEvents

Methods inherited from class com.google.gwt.user.client.ui.UIObject

addStyleDependentName, addStyleName, ensureDebugId, ensureDebugId, ensureDebugId, getAbsoluteLeft, getAbsoluteTop, getElement, getOffsetHeight, getOffsetWidth, getStyleElement, getStyleName, getStyleName, getStylePrimaryName, getStylePrimaryName, getTitle, isVisible, isVisible, onEnsureDebugId, removeStyleDependentName, removeStyleName, resolvePotentialElement, setElement, setElement, setHeight, setPixelSize, setSize, setStyleDependentName, setStyleName, setStyleName, setStyleName, setStyleName, setStylePrimaryName, setStylePrimaryName, setTitle, setVisible, setVisible, setWidth, sinkBitlessEvent, toString

Methods inherited from class java.lang.Object

clone, equals, finalize, getClass, hashCode, notify, notifyAll, wait, wait, wait

Methods inherited from interface com.google.gwt.event.shared.HasHandlers

fireEvent

Methods inherited from interface gwt.material.design.client.base.HasFlexbox

setVisible

Methods inherited from interface java.lang.Iterable

forEach, spliterator

Field Detail

typeMixin

public final gwt.material.design.client.base.mixin.CssTypeMixin<AutocompleteType,MaterialAutoComplete> typeMixin

Constructor Detail

MaterialAutoComplete

public MaterialAutoComplete()

Use MaterialAutocomplete to search for matches from local or remote data sources.

MaterialAutoComplete

public MaterialAutoComplete(AutocompleteType type)

MaterialAutoComplete

public MaterialAutoComplete(com.google.gwt.user.client.ui.SuggestOracle suggestions)

Use MaterialAutocomplete to search for matches from local or remote data sources.

See Also:

setSuggestions(SuggestOracle)

Method Detail

generateAutoComplete

protected void generateAutoComplete(com.google.gwt.user.client.ui.SuggestOracle suggestions)

Generate and build the List Items to be set on Auto Complete box.

addItem

protected boolean addItem(com.google.gwt.user.client.ui.SuggestOracle.Suggestion suggestion)

Adding the item value using Material Chips added on auto complete box

clear

public void clear()

Clear the chip items on the autocomplete box

Specified by:

clear in interface com.google.gwt.user.client.ui.HasWidgets

Overrides:

clear in class com.google.gwt.user.client.ui.Panel

getFocusableMixin

protected gwt.material.design.client.base.mixin.FocusableMixin<gwt.material.design.client.base.MaterialWidget> getFocusableMixin()

Overrides:

getFocusableMixin in class gwt.material.design.client.base.MaterialWidget

getItemValues

public List<String> getItemValues()

Returns:

the item values on autocomplete

See Also:

getValue()

setItemValues

public void setItemValues(List<String> itemValues)

Parameters:

itemValues - the itemsSelected to set

See Also:

setValue(List)

getItemsHighlighted

public List<gwt.material.design.client.ui.html.ListItem> getItemsHighlighted()

Returns:

the itemsHighlighted

setItemsHighlighted

public void setItemsHighlighted(List<gwt.material.design.client.ui.html.ListItem> itemsHighlighted)

Parameters:

itemsHighlighted - the itemsHighlighted to set

getSuggestions

public com.google.gwt.user.client.ui.SuggestOracle getSuggestions()

Returns:

the suggestion oracle

setSuggestions

public void setSuggestions(com.google.gwt.user.client.ui.SuggestOracle suggestions)

Sets the SuggestOracle to be used to provide suggestions. Also setups the component with the needed event handlers and UI elements.

Parameters:

suggestions - the suggestion oracle to set

setSuggestions

public void setSuggestions(com.google.gwt.user.client.ui.SuggestOracle suggestions,
                           AutocompleteType type)

getLimit

public int getLimit()

setLimit

public void setLimit(int limit)

getPlaceholder

public String getPlaceholder()

Specified by:

getPlaceholder in interface gwt.material.design.client.base.HasPlaceholder

setPlaceholder

public void setPlaceholder(String placeholder)

Specified by:

setPlaceholder in interface gwt.material.design.client.base.HasPlaceholder

setError

public void setError(String error)

Specified by:

setError in interface gwt.material.design.client.base.HasError

setSuccess

public void setSuccess(String success)

Specified by:

setSuccess in interface gwt.material.design.client.base.HasError

setHelperText

public void setHelperText(String helperText)

Specified by:

setHelperText in interface gwt.material.design.client.base.HasError

clearErrorOrSuccess

public void clearErrorOrSuccess()

Specified by:

clearErrorOrSuccess in interface gwt.material.design.client.base.HasError

getChipProvider

public MaterialAutoComplete.MaterialChipProvider getChipProvider()

Gets the current MaterialAutoComplete.MaterialChipProvider. By default, the class uses an instance of MaterialAutoComplete.DefaultMaterialChipProvider.

setChipProvider

public void setChipProvider(MaterialAutoComplete.MaterialChipProvider chipProvider)

Sets a MaterialAutoComplete.MaterialChipProvider that can customize how the MaterialChip is created for each selected SuggestOracle.Suggestion.

setDirectInputAllowed

public void setDirectInputAllowed(boolean directInputAllowed)

When set to false, only SuggestOracle.Suggestions from the SuggestionOracle are accepted. Direct input create by the user is ignored. By default, direct input is allowed.

isDirectInputAllowed

public boolean isDirectInputAllowed()

Returns:

if SuggestOracle.Suggestions created by direct input from the user should be allowed. By default directInputAllowed is true.

setSelectedChipStyle

public void setSelectedChipStyle(String selectedChipStyle)

Sets the style class applied to chips when they are selected.

Defaults to "blue white-text".

Parameters:

selectedChipStyle - The class or classes to be applied to selected chips

getSelectedChipStyle

public String getSelectedChipStyle()

Returns the style class applied to chips when they are selected.

Defaults to "blue white-text".

showProgress

public void showProgress(gwt.material.design.client.constants.ProgressType type)

Specified by:

showProgress in interface gwt.material.design.client.base.HasProgress

setPercent

public void setPercent(double percent)

Specified by:

setPercent in interface gwt.material.design.client.base.HasProgress

hideProgress

public void hideProgress()

Specified by:

hideProgress in interface gwt.material.design.client.base.HasProgress

addKeyUpHandler

public com.google.gwt.event.shared.HandlerRegistration addKeyUpHandler(com.google.gwt.event.dom.client.KeyUpHandler handler)

Specified by:

addKeyUpHandler in interface com.google.gwt.event.dom.client.HasKeyUpHandlers

setType

public void setType(AutocompleteType type)

Specified by:

setType in interface gwt.material.design.client.base.HasType<AutocompleteType>

getType

public AutocompleteType getType()

Specified by:

getType in interface gwt.material.design.client.base.HasType<AutocompleteType>

addSelectionHandler

public com.google.gwt.event.shared.HandlerRegistration addSelectionHandler(com.google.gwt.event.logical.shared.SelectionHandler<com.google.gwt.user.client.ui.SuggestOracle.Suggestion> handler)

Specified by:

addSelectionHandler in interface com.google.gwt.event.logical.shared.HasSelectionHandlers<com.google.gwt.user.client.ui.SuggestOracle.Suggestion>

addValueChangeHandler

public com.google.gwt.event.shared.HandlerRegistration addValueChangeHandler(com.google.gwt.event.logical.shared.ValueChangeHandler<List<? extends com.google.gwt.user.client.ui.SuggestOracle.Suggestion>> handler)

Specified by:

addValueChangeHandler in interface com.google.gwt.event.logical.shared.HasValueChangeHandlers<List<? extends com.google.gwt.user.client.ui.SuggestOracle.Suggestion>>

getValue

public List<? extends com.google.gwt.user.client.ui.SuggestOracle.Suggestion> getValue()

Returns the selected SuggestOracle.Suggestions. Modifications to the list are not propagated to the component.

Specified by:

getValue in interface com.google.gwt.user.client.TakesValue<List<? extends com.google.gwt.user.client.ui.SuggestOracle.Suggestion>>

Specified by:

getValue in interface com.google.gwt.user.client.ui.HasValue<List<? extends com.google.gwt.user.client.ui.SuggestOracle.Suggestion>>

Returns:

the list of selected SuggestOracle.Suggestions, or empty if none was selected (never null).

setValue

public void setValue(List<? extends com.google.gwt.user.client.ui.SuggestOracle.Suggestion> value)

Specified by:

setValue in interface com.google.gwt.user.client.TakesValue<List<? extends com.google.gwt.user.client.ui.SuggestOracle.Suggestion>>

Specified by:

setValue in interface com.google.gwt.user.client.ui.HasValue<List<? extends com.google.gwt.user.client.ui.SuggestOracle.Suggestion>>

setValue

public void setValue(List<? extends com.google.gwt.user.client.ui.SuggestOracle.Suggestion> value,
                     boolean fireEvents)

Specified by:

setValue in interface com.google.gwt.user.client.ui.HasValue<List<? extends com.google.gwt.user.client.ui.SuggestOracle.Suggestion>>

setEnabled

public void setEnabled(boolean enabled)

Specified by:

setEnabled in interface com.google.gwt.user.client.ui.HasEnabled

Overrides:

setEnabled in class gwt.material.design.client.base.MaterialWidget