Post Reply 
Author Multi-Autocomplete
AT core team member

Find all posts by this user
Quote this message in a reply
Default  25 September 2013 13:56
1. Requirements

The requirement is to have a new component to support auto-complete in multi entry fields. For example, autocomplete on airline names on the airlines search fields that support multiple airline codes.

The goal of this new widget is to accept several separated user entries, each time proposing the user with an auto-completion list when typing.

Here is the high level flow:

  1. Focus is given to the widget.
  2. User starts typing.
  3. Auto-completion list is proposed.
  4. Arrow Key for selecting the item.
  5. The action to do the association is triggered when the TA press Enter Key.
  6. Esc key cancel the edit mode and return back to the previous state.
  7. An item is selected.
  8. The item is transformed into a "graphical object" represented by a background color, the label, and a close icon.
  9. The focus is given to the widget still, just on the right of the first object. User can continue typing and iterate again on the same steps.
  10. The newly proposed list should not include the items that have been already selected.
  11. Additionally, an object can be edited and deleted via the mouse and keyboard.
  12. If User type a string that does not match any element in the list, error bubble is display at validation time (Enter Key).
  13. The list does not include item(s) that have already been selected (option in the widget)
  14. If the name is longer than the button size (Property of the Widget?) the name is displayed with ‘…’


Entries are done according to the global flow described above.

In some cases (free-text configuration), unknown inputs are typed in by the user (no item was selected from the auto completion list), in which case, a separator character marks the end of the entry (comma by default, but should be configurable).

[Image: attachment.php?aid=22]

When many items has been entered, and there is no available space left, the widget then expands vertically and the items wrap on the following lines. The entered text should match all word boundaries of the suggestion list.( but should be configurable).

Pax/Segment selection

We want to use the widget to select passengers or segments.
Passengers/Segments can be referred to by their name: ie 'John Doe' or 'AA1899', or their short name ie 'P1' or 'S1'.
Passengers or Segments should be selectable by autocompletion with either the full name or the short name (P1, S1). Moreover, we should be able to select multiple elements using numeric ranges as it is done with the cryptic commands:
"P1-3" selects passengers 1, 2 and 3 "S2,5,6" selects segments 2, 5 and 6

[Image: attachment.php?aid=25]


The width of the element representing a passenger or segment should expand so that the name is fully displayed. If There are too many elements to display on a single line, the widget should scale vertically and add a second line. If a name is too long to be displayed on a single line, an ellipsis should be displayed.

[Image: attachment.php?aid=26]

Auto-complete vs drop-down

The widget should be usable with large amounts of data through auto-completion lists, as well as with small amounts of data through simple drop-downs.
[Image: attachment.php?aid=20]
If the widget is configured to work with a drop-down of say, airlines, then an Expand button is displayed on the right side of the widget to give the whole list of items. Selecting from this list add a new object in the field.


Edition relies on the fact that "graphical objects" can be selected.

After a few entries have been typed, the user can go back and edit any of them in the following way.

"Graphical objects" have a close icon on the right side, clicking on it removes the entry.
"Graphical objects" can be clicked on once to be selected, and at the second click become editable (focus is given into the individual auto-complete field). At this stage, the text in the field can be erased and typed again just like with any singular auto-complete.
[Image: attachment.php?aid=32]

The edition can also be done via the keyboard:
  • Backspace selects the previous object.
  • Backspace while selected deletes the object.
  • Left/right arrow keys are used to select the previous/next objects.
  • Enter key goes to edit mode on the currently selected object.

Error Handling

The widget's field can be displayed in error state if there is a validation error, as seen below:

[Image: attachment.php?aid=23]

The normal AriaTemplates validation mechanism should apply to the widget: developers should be able to specify custom validation such as the maximum/minimum number of items, detection for duplicates, etc ...

On top of this, one type of validation at object level needs to be supported: when the widget is configured not to accept free-text, then the user may still type something that is not proposed by the completion list, ending by comma, however, in this case the invalid entry is marked by an error tip (located just above the entry), as shown below:

[Image: attachment.php?aid=24]

The normal AriaTemplates validation mechanism should apply to the widget: developers should be able to specify custom validation such as the maximum/minimum number of items, detection for duplicates, etc ...

We should be able to validate user input (number of items, etc) at the time the user hits enter to trigger the form submission. Then we should be able to display an error tooltip with a custom message if validation fails.

Technical Solution

Multi AutoComplete Part

Create a new widget called MultiAutoComplete which has a similar behaviour like autocomplete, in addition it has option to add multiple values with range supported.

[Image: attachment.php?aid=29]

Widget API

{@aria:MultiAutoComplete {
         maxOptions : ''  //Maximum no of options that can be selected with autocomplete.

        // ...

The Widget generates the below markup.

<span style="width:280px;margin:1px;" class="xWidget" atdelegate="d81" id="w17">
  <label style="vertical-align:middle;display:block;width:280px;height:13px;text-align:left;" class="xMultiAutoComplete_std_normal_label">
    AutoComplete Label
  <table cellspacing="0" cellpadding="0" style="position: relative;display:inline-block;vertical-align: middle;">
    <tbody isframe="1">
        <td class="xMultiAutoComplete_std_normal_tlc xMultiAutoComplete_std_normal_bkgA">
        <td class="xMultiAutoComplete_std_normal_ts xMultiAutoComplete_std_normal_bkgB">
        <td class="xMultiAutoComplete_std_normal_trc xMultiAutoComplete_std_normal_bkgA">
        <td class="xMultiAutoComplete_std_normal_ls xMultiAutoComplete_std_normal_bkgC">
        <td class="xMultiAutoComplete_std_normal_m">
          <span class="xFrameContent xMultiAutoComplete_std_normal_c  xOverflowXHidden xOverflowYHidden" style="width:272px;">
            <ul class="chosen-choices">
              <li class="xAutocomplete-option">
                  P2. BERG-KOHL Tommy  
                <a class="xAutocomplete-close" data-option-array-index="0">
              <li class="xAutocomplete-option">
                  P3. DUPONTEL Martine Mrs
                <a class="xAutocomplete-close" data-option-array-index="1">
              <li class="xAutocomplete-option">
                  P4. DUPONTEL John Mrs  
                <a class="xAutocomplete-close" data-option-array-index="2">
              <li class="xAutocomplete-option">
                <input class="xTextInputInput" type="text" style="padding: 0px; position: relative; margin: 0px;              background-color: transparent; value="" spellcheck="false" _ariainput="1">
        <td class="xMultiAutoComplete_std_normal_rs xMultiAutoComplete_std_normal_bkgC">
         <td class="xMultiAutoComplete_std_normal_blc xMultiAutoComplete_std_normal_bkgA">
         <td class="xMultiAutoComplete_std_normal_bs xMultiAutoComplete_std_normal_bkgB">
         <td class="xMultiAutoComplete_std_normal_brc xMultiAutoComplete_std_normal_bkgA">

Value of Autocomplete
  • Empty autocomplete is initialized with a null value
  • The value returned by the autocomplete on choosing the option from suggestions are pushed to the value array.
  • The Selected options will be filtered from next autocomplete suggestions.
  • on clicking the close button on the selected value removes it from value array.

Multi AutoComplete Edit
  • Edit Mode is Handled by MultiAutoCompleteController when the user double click on selected value.
  • Only one value can be edited at a time.
  • _EditInputString method will check the edited value and Auto-Completion list is proposed, if the edited text does not match any element in the list and if free text is not allowed CheckError method will show error bubble on validation.
  • Clicking on the close removes it from value Array.

Multi Autocomplete Controller

The Multi Autocomplete Controller module handle the resource handlers, rendering of the suggestion template depending on the user interaction. Multi Autocomplete Controller handles the content and functionality similar to the AutocompleteController and MultiselectController and shares the similar behaviour. The expando button behaviour is handled by controller such that on click of button all suggestions will be shown along with checkboxes with 'select all', 'deselect all', 'close' links. Already selected values will be checked.

Handling of Ellipsis
Multiautpcomplete handler also handles ellipsis if the width of the selected value is wider than autocomplete width through
Key Board and Mouse Interaction
  • Clicking on the selected value highlights the selected option.
  • Clicking out side the MultiAutocomplete removes the highlight and closes the suggestion template
  • Side Arrow keys can be used to navigate through the selected value.
  • Double click on highlighted value goes to edit mode if freetext is enabled.
  • DEL and Backspace key press on highlighted value removes the value.
  • Click on expand button gives all the suggestions.
  • ESC key press removes the highlight from the selected value and put focus back to the input field of Autocomplete, if its in edit mode it should be changed to Read Mode.
Source for MultiAutocomplete is handled by MultiAutocompleteHandler which extends the LCResourcesHandler. This handler should implement the IMultiResourceHandler Interface.

It also handles selecting the range of values. The range of value is handled by _getRangeSuggestions method which accepts the character only in the format P1-4 or P1,2,4 parses them to show the suggestions list having the range selected.
       * Call the callback with an array of suggestions in its arguments. Suggestions that are exact match are
       * marked with parameter exactMatch set to true and filters the suggestions which are already exists in value array.
       * @param {Object} entryObject having the text entry, value array and callback
        getSuggestions : function (entryObject) {

       * Compares the suggestion with current selected value and filters the suggestions and its case sensitive.
       * @param {Array} valueArray having the array of values,
       * @param {Array} suggestions list of suggestion objects
       * @return {Array} filtered suggestion after removing the selected value in autocomplete from suggestion Object.
        filterSuggestions : function (valueArray, suggestions) {
3. History
18/09/2013  Creation of the specification  - Renju
18/09/2013  Creation of the technical solution  - Girish
30/09/2013  Update of the technical solution  - Girish/Srinath

Attached File(s)
.png  Multi-ac-aria-editModeNew.png (Size: 64.6 KB / Downloads: 61)
.jpg  MC_Error1.jpg (Size: 31.06 KB / Downloads: 129)
.jpg  MC_Entry.jpg (Size: 75.1 KB / Downloads: 129)
.jpg  MC_Edit.jpg (Size: 61.65 KB / Downloads: 74)
.jpg  MC_dropdown.jpg (Size: 24.37 KB / Downloads: 129)
.jpg  MC_Error2.jpg (Size: 55.5 KB / Downloads: 119)
.jpg  MC_paxsegment.jpg (Size: 47.81 KB / Downloads: 120)
.jpg  MC_wrapping.jpg (Size: 15.99 KB / Downloads: 120)
.png  AcRange.png (Size: 12.45 KB / Downloads: 33)
.png  AutocompleteFlow.png (Size: 13.8 KB / Downloads: 105)
(This post was last modified: 16 December 2013 16:56 by smadapathi.)
Marc Laval
AT core team member

Find all posts by this user
Quote this message in a reply
30 September 2013 09:30
Fine for me.

Thank you
Post Reply