Wt: Wt::WSuggestionPopup Class Reference

Wt 3.3.0

- Main Page
- Related Pages
- Modules
- Namespaces
- Classes

- Class List
- Class Hierarchy
- Class Members

Classes | Public Types | Public Member Functions | Static Public Member Functions | Protected Member Functions
Wt::WSuggestionPopup Class Reference
Model/view system

A widget which popups to assist in editing a textarea or lineedit. More...

`#include <Wt/WSuggestionPopup>`

Inheritance diagram for Wt::WSuggestionPopup:
[legend]

List of all members.

## Classes
struct | Options
| A configuration object to generate a matcher and replacer JavaScript function. More...
## Public Types
enum | PopupTrigger { Editing = 0x1, DropDownIcon = 0x2 }
| Enumeration that defines a trigger for showing the popup. More...
## Public Member Functions
| WSuggestionPopup (const Options &options, WObject *parent=0)
| Creates a suggestion popup.
| WSuggestionPopup (const std::string &matcherJS, const std::string &replacerJS, WObject *parent=0)
| Creates a suggestion popup with given matcherJS and replacerJS.
void | forEdit (WFormWidget *edit, WFlags< PopupTrigger > popupTriggers=Editing)
| Lets this suggestion popup assist in editing an edit field.
void | removeEdit (WFormWidget *edit)
| Removes the edit field from the list of assisted editors.
void | showAt (WFormWidget *edit)
| Shows the suggestion popup at an edit field.
void | clearSuggestions ()
| Clears the list of suggestions.
void | addSuggestion (const WString &suggestionText, const WString &suggestionValue=WString::Empty)
| Adds a new suggestion.
void | setModel (WAbstractItemModel *model)
| Sets the model to be used for the suggestions.
WAbstractItemModel * | model () const
| Returns the data model.
void | setModelColumn (int index)
| Sets the column in the model to be used for the items.
void | setDefaultIndex (int row)
| Sets a default selected value.
int | defaultIndex () const
| Returns the default value.
void | setFilterLength (int count)
| Sets the minimum input length before showing the popup.
int | filterLength () const
| Returns the filter length.
Signal< WString > & | filterModel ()
| Signal that indicates that the model should be filtered.
Signal< int, WFormWidget * > & | activated ()
| Signal emitted when a suggestion was selected.
void | setGlobalPopup (bool global)
| Controls how the popup is positioned (deprecated).
## Static Public Member Functions
static std::string | generateMatcherJS (const Options &options)
| Creates a standard matcher JavaScript function.
static std::string | generateReplacerJS (const Options &options)
| Creates a standard replacer JavaScript function.
## Protected Member Functions
virtual void | render (WFlags< RenderFlag > flags)
| Renders the widget.

## Detailed Description

A widget which popups to assist in editing a textarea or lineedit.

This widget may be associated with one or more WFormWidgets (typically a WLineEdit or a WTextArea).

The popup provides the user with suggestions to enter input. The popup can be used by one or more editors, using forEdit(). The popup will show when the user starts editing the edit field, or when the user opens the suggestions explicitly using a drop down icon or with the down key. The popup positions itself intelligently just below or just on top of the edit field. It offers a list of suggestions that match in some way with the current edit field, and dynamically adjusts this list. The implementation for matching individual suggestions with the current text is provided through a JavaScript function. This function may also highlight part(s) of the suggestions to provide feed-back on how they match.

WSuggestionPopup is an MVC view class, using a simple WStringListModel by default. You can set a custom model using setModel(). The model can provide different text for the suggestion text (Wt::DisplayRole) and value (Wt::UserRole). The member methods clearSuggestions() and addSuggestion() manipulate this model. Note that a WStringListModel does not support Wt::UserRole data, so you may need to use a WStandardItemModel instead.

By default, the popup implements all filtering client-side. To support large datasets, you may enable server-side filtering of suggestions based on the input. The server-side filtering may provide a coarse filtering using a fixed size prefix of the entered text, and complement the client-side filtering. To enable server-side filtering, use setFilterLength() and listen to filter notification using the modelFilter() signal. Whenever a filter event is generated you can adjust the model's content according to the filter (e.g. using a WSortFilterProxyModel). By using setMaximumSize() you can also limit the maximum height of the popup, in which case scrolling is supported (similar to a combo-box).

The class is initialized with an Options struct which configures how suggestion filtering and result editing is done. Alternatively, you can provide two JavaScript functions, one for filtering the suggestions, and one for editing the value of the textarea when a suggestion is selected.

The matcherJS function must have the following JavaScript signature:

     function (editElement) {
       // fetch the location of cursor and current text in the editElement.

       // return a function that matches a given suggestion with the current value of the editElement.
       return function(suggestion) {

         // 1) if suggestion is null, simply return the current text 'value'
         // 2) check suggestion if it matches
         // 3) add highlighting markup to suggestion if necessary

         return { match : ...,      // does the suggestion match ? (boolean)
                  suggestion : ...  // modified suggestion with highlighting
                 };
       }
     }

The replacerJS function that edits the value has the following JavaScript signature.

     function (editElement, suggestionText, suggestionValue) {
       // editElement is the form element which must be edited.
       // suggestionText is the displayed text for the matched suggestion.
       // suggestionValue is the stored value for the matched suggestion.

       // computed modifiedEditValue and modifiedPos ...

       editElement.value = modifiedEditValue;
       editElement.selectionStart = edit.selectionEnd = modifiedPos;
     }

To style the suggestions, you should style the <span> element inside this widget, and the <span>."sel" element to style the current selection.

Usage example:

     // options for email address suggestions
     Wt::WSuggestionPopup::Options contactOptions
     = { "<b>",         // highlightBeginTag
         "</b>",        // highlightEndTag
         ',',           // listSeparator      (for multiple addresses)
         " \\n",        // whitespace
         "-., \"@\\n;", // wordSeparators     (within an address)
         ", "           // appendReplacedText (prepare next email address)
        };

     Wt::WSuggestionPopup *popup = new Wt::WSuggestionPopup(contactOptions, this);
     Wt::WTextArea *textEdit = new Wt::WTextArea(this);
     popup->forEdit(textEdit);

     // load popup data
     for (unsigned i = 0; i < contacts.size(); ++i)
       popup->addSuggestion(contacts[i].formatted(), contacts[i].formatted());

A screenshot of this example:

An example WSuggestionPopup (default) | An example WSuggestionPopup (polished)

When using the DropDownIcon trigger, an additional style class is provided for the edit field: `Wt-suggest-dropdown`, which renders the icon to the right inside the edit field. This class may be used to customize how the drop down icon is rendered.

Note:
  This widget requires JavaScript support.

## Member Enumeration Documentation

enum Wt::WSuggestionPopup::PopupTrigger

Enumeration that defines a trigger for showing the popup.

See also:
  forEdit()

Enumerator:

  Editing | Shows popup when the user starts editing. The popup is shown when the currently edited text has a length longer than the filter length.
  DropDownIcon | Shows popup when user clicks a drop down icon. The lineedit is modified to show a drop down icon, and clicking the icon shows the suggestions, very much like a WComboCox.

## Constructor & Destructor Documentation

Wt::WSuggestionPopup::WSuggestionPopup | ( | const Options & | options,
|  | WObject * | parent = `0`
| ) |  |

Creates a suggestion popup.

The popup using a standard matcher and replacer implementation that is configured using the provided `options`.

See also:
  generateMatcherJS(), generateReplacerJS()

Wt::WSuggestionPopup::WSuggestionPopup | ( | const std::string & | matcherJS,
|  | const std::string & | replacerJS,
|  | WObject * | parent = `0`
| ) |  |

Creates a suggestion popup with given matcherJS and replacerJS.

See supra for the expected signature of the matcher and replace JavaScript functions.

## Member Function Documentation

Signal<int, WFormWidget *>& Wt::WSuggestionPopup::activated | ( |  | ) |

Signal emitted when a suggestion was selected.

The selected item is passed as the first argument and the editor as the second.

void Wt::WSuggestionPopup::addSuggestion | ( | const WString & | suggestionText,
|  | const WString & | suggestionValue = `WString::Empty`
| ) |  |

Adds a new suggestion.

This adds an entry to the underlying model. The `suggestionText` is set as Wt::DisplayRole and the `suggestionValue` (which is inserted into the edit field on selection) is set as Wt::UserRole.

See also:
  clearSuggestions(), setModel()

void Wt::WSuggestionPopup::clearSuggestions | ( |  | ) |

Clears the list of suggestions.

This clears the underlying model.

See also:
  addSuggestion()

int Wt::WSuggestionPopup::defaultIndex | ( |  | ) | const

Returns the default value.

See also:
  setDefaultValue()

int Wt::WSuggestionPopup::filterLength | ( |  | ) | const

Returns the filter length.

See also:
  setFilterLength()

Signal<WString>& Wt::WSuggestionPopup::filterModel | ( |  | ) |

Signal that indicates that the model should be filtered.

The argument is the initial input. When Editing is used as edit trigger, its length will always equal the filterLength(). When DropDownIcon is used as edit trigger, the input length may be less than filterLength(), and the the signal will be called repeatedly as the user provides more input.

For example, if you are using a WSortFilterProxyModel, you could react to this signal with:

     void MyClass::filterSuggestions(const WString& filter)
     {
       proxyModel->setFilterRegExp(filter + ".*");
     }

void Wt::WSuggestionPopup::forEdit | ( | WFormWidget * | edit,
|  | WFlags< PopupTrigger > | popupTriggers = `Editing`
| ) |  |

Lets this suggestion popup assist in editing an edit field.

A single suggestion popup may assist in several edits by repeated calls of this method.

The `popupTriggers` control how editing is triggered (either by the user editing the field by entering keys or by an explicit drop down menu that is shown inside the edit).

See also:
  removeEdit()

std::string Wt::WSuggestionPopup::generateMatcherJS | ( | const Options & | options | ) | `[static]`

Creates a standard matcher JavaScript function.

This returns a JavaScript function that provides a standard implementation for the matching input, based on the given `options`.

std::string Wt::WSuggestionPopup::generateReplacerJS | ( | const Options & | options | ) | `[static]`

Creates a standard replacer JavaScript function.

This returns a JavaScript function that provides a standard implementation for the matching input, based on the given `options`.

WAbstractItemModel* Wt::WSuggestionPopup::model | ( |  | ) | const

Returns the data model.

See also:
  setModel()

void Wt::WSuggestionPopup::removeEdit | ( | WFormWidget * | edit | ) |

Removes the edit field from the list of assisted editors.

The editor will no longer be assisted by this popup widget.

See also:
  forEdit().

void Wt::WSuggestionPopup::render | ( | WFlags< RenderFlag > | flags | ) | `[protected, virtual]`

Renders the widget.

This function renders the widget (or an update for the widget), after this has been scheduled using scheduleRender().

The default implementation will render the widget by serializing changes to JavaScript and HTML. You may want to reimplement this widget if you have been postponing some of the layout / rendering implementation until the latest moment possible. In that case you should make sure you call the base implementation however.

Reimplemented from Wt::WPopupWidget.

void Wt::WSuggestionPopup::setDefaultIndex | ( | int | row | ) |

Sets a default selected value.

`row` is the model row that is selected by default (only if it matches the current input).

The default value is -1, indicating no default.

void Wt::WSuggestionPopup::setFilterLength | ( | int | count | ) |

Sets the minimum input length before showing the popup.

When the user has typed this much characters, filterModel() is emitted which allows you to filter the model based on the initial input.

The default value is 0, which has the effect of always showing the entire model.

A value of -1 indicates that server-side filtering is continuously applied, no matter the length of the text input.

See also:
  filterModel()

void Wt::WSuggestionPopup::setGlobalPopup | ( | bool | global | ) |

Controls how the popup is positioned (deprecated).

Deprecated:
  this option is now ignored, since the popup is automatically positioned to behave properly.

void Wt::WSuggestionPopup::setModel | ( | WAbstractItemModel * | model | ) |

Sets the model to be used for the suggestions.

The `model` may not be `0`, and ownership of the model is not transferred.

The default value is a WStringListModel that is owned by the suggestion popup.

The Wt::DisplayRole is used for the suggestion text. The Wt::UserRole is used for the suggestion value, unless empty, in which case the suggestion text is used as value.

Note that since the default WStringListModel does not support UserRole data, you will want to change it to a more general model (e.g. WStandardItemModel) if you want suggestion values that are different from display values.

See also:
  setModelColumn(int)

void Wt::WSuggestionPopup::setModelColumn | ( | int | index | ) |

Sets the column in the model to be used for the items.

The column `index` in the model will be used to retrieve data.

The default value is 0.

See also:
  setModel()

void Wt::WSuggestionPopup::showAt | ( | WFormWidget * | edit | ) |

Shows the suggestion popup at an edit field.

This is equivalent to the user triggering the suggestion popup to be shown.

All Classes Namespaces Functions Variables Typedefs Enumerations Enumerator