Raible Designs

He he. That's what you get for being in my Facebook Friends. ;-)

On a related note, the list of contacts in the GWT demo is a random assortment of folks I exported from my LinkedIn Connections.

Posted by Matt Raible on June 05, 2009 at 10:45 AM MDT #

Posted by Sakuraba on June 08, 2009 at 02:16 AM MDT #

Posted by James Heggs on June 18, 2009 at 06:19 AM MDT #

With IE it would seem that because the input field is smaller than the list width sometimes clicking on the whitespace doesn't focus the input field, the problem is alleviated by setting the width of the input element to 100%, mozilla and chrome don't suffer this problem.

Strangely, my first idea, adding a HasMouseDownHandler to the BulletList and adding a handler that focuses the input box didn't work.

For all the poor souls that need to send that data from a form, you can generate (or wrap) in parallel a hidden ListBox, just don't forget to select the items :) Of course, what to show the user if form fails validation server side is another issue, fix one problem, open the next :D

Also, you use the text in the input filed as the selected value, however, if one uses the Suggestions+DTO value, perhaps it's better to show the ReplacementString and save the DTO value in itemsSelected but that would require some further code changing.

I can't see if there is a way to make suggestions on more than 1-row? Anyhow, great job!

Posted by Srgjan Srepfler on June 19, 2009 at 04:56 PM MDT #

Hello,

thanks for your reply. The first thing I did (before posted my first comment) was download the source code and integrate it into my project. Instead of having a panel I changed some code to simply have a textbox to put into my panels. Then I change the code to fill the oracle with the information from my database and it works ok.

Then, I needed to set in the suggestTextBox the data that I read from the database. After debuging and trying to understand the code, I created the following method to set the values I read from the database. That was easy.

	public void setItem(String item) {
		itemBox.setValue(item);
		deselectItem(itemBox, list);
	}

The most complicated part to me was reset the values by code. I needed to simulate the behaviour produced when the user clicks on the "x" button in the element. After a lot of test and debuging I created the following method:

	public void removeItems() {
		String tagToRemove;
		int num = list.getWidgetCount();
		for (int i=num-1; i>=0; i--) {
			tagToRemove = ((ListItem)list.getWidget(i)).getText();
			if (list.getWidget(i).getElement().getInnerHTML().contains("<span>x</span>")) {
				itemsSelected.remove(tagToRemove.substring(0, tagToRemove.length()-1));
				list.remove(list.getWidget(i));
			}
		}
	}

And now, finally it works!!.

This component is amazing and it is what I've been looking for a lot of time. The best for me would be something like the labels management in gmail, but with this I'm happy.

Now it is integrated in Mufly (my GWT personal project). There is no demo to try it but it will be available in few days.

Regards, Iván.

Posted by Iván on June 23, 2009 at 08:30 AM MDT #

Posted by Srgjan Srepfler on July 06, 2009 at 04:05 AM MDT #

Posted by mumuri on January 29, 2010 at 03:50 PM MST #

Posted by Sebastian on August 17, 2010 at 06:58 PM MDT #

Hi Matt,

Could you update a link in your blog post for me please?

Posted by James Heggs on November 17, 2010 at 08:26 AM MST #

Posted by Manos on January 29, 2012 at 10:06 PM MST #

Is this open source or whats the licence to use it?

I am looking for a Vaadin Widget like this and was considering wrapping this example to support Vaadin.

Thanks
Lars.

Posted by Lars on February 27, 2012 at 06:35 AM MST #

First of all, thank you Matt for sharing your knowledge, experience and great code!

I have played around with and tested the code today and seem to have the following functionality working:

• de-highlighting items
• deleting highlighted items via delete or backspace keys

Here is the code with the minor changes needed:

public class MultiValueSuggestBox extends Composite {
    List<String> itemsSelected = new ArrayList<String>();
    List<ListItem> itemsHighlighted = new ArrayList<ListItem>();

    public MultiValueSuggestBox(MultiWordSuggestOracle suggestions) {
        FlowPanel panel = new FlowPanel();
        initWidget(panel);
        // 2. Show the following element structure and set the last <div> to
        // display: block
        /*
         * <ul class="multiValueSuggestBox-list"> <li
         * class="multiValueSuggestBox-input-token"> <input type="text" style=
         * "outline-color: -moz-use-text-color; outline-style: none; outline-width: medium;"
         * /> </li> </ul> <div class="multiValueSuggestBox-dropdown"
         * style="display: none;"/>
         */
        final BulletList list = new BulletList();
        list.setStyleName("multiValueSuggestBox-list");
        final ListItem item = new ListItem();
        item.setStyleName("multiValueSuggestBox-input-token");
        final TextBox itemBox = new TextBox();
        itemBox.getElement().setAttribute("style",
                "outline-color: -moz-use-text-color; outline-style: none; outline-width: medium;");
        final SuggestBox box = new SuggestBox(suggestions, itemBox);
        box.getElement().setId("suggestion_box");
        item.add(box);
        list.add(item);

        // this needs to be on the itemBox rather than box, or backspace will
        // get executed twice
        itemBox.addKeyDownHandler(new KeyDownHandler() {
            // handle key events on the suggest box
            public void onKeyDown(KeyDownEvent event) {
                switch (event.getNativeKeyCode()) {
                    case KeyCodes.KEY_ENTER:
                        // only allow manual entries with @ signs (assumed email
                        // addresses)
                        if (itemBox.getValue().contains("@")) {
                            deselectItem(itemBox, list);
                        }
                        break;

                    // handle backspace
                    case KeyCodes.KEY_BACKSPACE:
                        if (itemBox.getValue().trim().isEmpty()) {
                            if (itemsHighlighted.isEmpty()) {
                                if (itemsSelected.size() > 0) {
                                    ListItem li = (ListItem) list.getWidget(list.getWidgetCount() - 2);
                                    Paragraph p = (Paragraph) li.getWidget(0);
                                    if (itemsSelected.contains(p.getText())) {
                                        // remove selected item
                                        itemsSelected.remove(p.getText());
                                    }
                                    list.remove(li);
                                }
                            }
                        }
                        // continue to delete
                    
                    // handle delete
                    case KeyCodes.KEY_DELETE:
                        if (itemBox.getValue().trim().isEmpty()) {
                            for (ListItem li : itemsHighlighted) {
                                list.remove(li);
                                Paragraph p = (Paragraph) li.getWidget(0);
                                itemsSelected.remove(p.getText());
                            }
                            itemsHighlighted.clear();
                        }
                        itemBox.setFocus(true);
                        break;
                }
            }
        });

        box.addSelectionHandler(new SelectionHandler<SuggestOracle.Suggestion>() {
            // called when an item is selected from list of suggestions
            public void onSelection(SelectionEvent<SuggestOracle.Suggestion> selectionEvent) {
                deselectItem(itemBox, list);
            }
        });

        panel.add(list);

        panel.getElement().setAttribute("onclick", "document.getElementById('suggestion_box').focus()");
        box.setFocus(true);
        /*
         * Div structure after a few elements have been added: <ul
         * class="multiValueSuggestBox-list"> <li
         * class="multiValueSuggestBox-token"> <p>What's New Scooby-Doo?</p>
         * <span class="multiValueSuggestBox-delete-token">x</span> </li> <li
         * class="multiValueSuggestBox-token"> <p>Fear Factor</p> <span
         * class="multiValueSuggestBox-delete-token">x</span> </li> <li
         * class="multiValueSuggestBox-input-token"> <input type="text" style=
         * "outline-color: -moz-use-text-color; outline-style: none; outline-width: medium;"
         * /> </li> </ul>
         */
    }

    private void deselectItem(final TextBox itemBox, final BulletList list) {
        if (itemBox.getValue() != null && !"".equals(itemBox.getValue().trim())) {
            /**
             * Change to the following structure: <li class="multiValueSuggestBox-token">
             * <p>
             * What's New Scooby-Doo?
             * </p>
             * <span class="multiValueSuggestBox-delete-token">x</span></li>
             */

            final ListItem displayItem = new ListItem();
            displayItem.setStyleName("multiValueSuggestBox-token");
            Paragraph p = new Paragraph(itemBox.getValue());

            displayItem.addClickHandler(new ClickHandler() {
                // called when a list item is clicked on
                public void onClick(ClickEvent clickEvent) {
                    if (itemsHighlighted.contains(displayItem)) { 
                        displayItem.removeStyleDependentName("selected");
                        itemsHighlighted.remove(displayItem);
                    }
                    else {
                        displayItem.addStyleDependentName("selected");
                        itemsHighlighted.add(displayItem);
                    }
                }
            });

            Span span = new Span("x");
            span.addClickHandler(new ClickHandler() {
                public void onClick(ClickEvent clickEvent) {
                    removeListItem(displayItem, list);
                }
            });

            displayItem.add(p);
            displayItem.add(span);
            // hold the original value of the item selected

            // add selected item
            itemsSelected.add(itemBox.getValue());

            list.insert(displayItem, list.getWidgetCount() - 1);
            itemBox.setValue("");
            itemBox.setFocus(true);
        }
    }

    private void removeListItem(ListItem displayItem, BulletList list) {
        itemsSelected.remove(displayItem.getWidget(0).getElement().getInnerHTML());
        list.remove(displayItem);
    }
}

I have renamed the style names as follows:

ul.multiValueSuggestBox-list {
    overflow: hidden;
    height: auto !important;
    height: 1%;
    width: 400px;
    border: 1px solid #8496ba;
    cursor: text;
    font-size: 12px;
    font-family: Verdana;
    min-height: 1px;
    z-index: 999;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

ul.multiValueSuggestBox-list {
    list-style-type: none;
}

ul.multiValueSuggestBox-list li input {
    border: 0;
    width: 100px;
    padding: 3px 8px;
    background-color: white;
    margin: 2px 0;
}

li.multiValueSuggestBox-token {
    overflow: hidden;
    height: auto !important;
    height: 1%;
    margin: 3px;
    padding: 1px 3px;
    background-color: #eff2f7;
    color: #000;
    cursor: default;
    border: 1px solid #ccd5e4;
    font-size: 11px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    float: left;
}

li.multiValueSuggestBox-token p {
    display: inline;
    padding: 0;
    margin: 0;
}

li.multiValueSuggestBox-token span {
    color: #a6b3cf;
    margin-left: 5px;
    font-weight: bold;
    cursor: pointer;
}

li.multiValueSuggestBox-token-selected {
    background-color: #5670a6;
    border: 1px solid #3b5998;
    color: #fff;
}

li.multiValueSuggestBox-input-token {
    float: left;
}

Posted by Cengiz on July 31, 2012 at 10:33 AM MDT #