Multiple Search Selection dropdown

[pk2251]

Hi,
I am trying to create a multiple selection dropdown that also has a search capability and I have been struggling to create that. I have seen example in the forum of predicative search, but nothing that has what I need. Here is an interactive example of what I am looking for: https://semantic-ui.com/modules/dropdown.html Scroll and look at the examples under multiple search selection (i.e. state search and country search).
Here is a photo of what I I need:

Has anyone had any luck creating something like this? I would really appreciate any help anyone may be able to provide. Thank you!

[davegoodman]

I’ve created something like this, by using two repeaters - one for the autocomplete and one for the values in the dismissable pills. I also have a text field widget that I move to the end of the pill repeater, where the user enters their search text. So it goes something like this:

• User enters a search value in the text field
• Text field shows the results repeater and filters it based on what’s entered in the text field
• User clicks a row in the results repeater
• Clicking the row deletes it from the results repeater and creates a new corresponding row in the pill repeater
• Once the new pill is added, the text field is moved to the end of the pill repeater and given focus

This took me a fairly long time to puzzle together, but it works really well. I can’t post the RP file as it includes intellectual property that isn’t mine, but happy to help you put something similar together.

[pk2251]

I am not as familiar with repeaters so that would be a huge help! Could you copy what you did to a Axure file without any intellectual property? If that is not possible, I can start a axure file with what I know and you can help modify it? Any help you can provide would be greatly appreciated.

[mbc66]

This thread has a good example of multi-select with repeater:

Custom dropdown with checkboxes

Hi everyone! We put together an example of a custom dropdown with custom checkbox items: [image] As you may know, there’s already a custom checkbox and a custom dropdown widget included in the Axure Training Library. We also have a couple tutorials here and here. Meanwhile, we also saw some examples where it was useful to combine the two elements, and so we put together a file below: CustomCheckboxDropdown.rp (111.2 KB) | See it live! Read on to learn more about the interactions. **The …

[davegoodman]

Pretty sure that’s the one I used as the basis for mine, although mine has a bunch of extra bells and whistles specific to the situation.

@pk2251 - happy to help but I can’t supply this specific UI in an RP file I’m afraid.

[mbc66]

@pk2251,

Here is a start. There are two repeaters, one for the list of all possible items (State names) and one for selected items, as @davegoodman suggests. I didn’t mess with moving the selected pills or search field, but you can see the basic functionality of searching by filtering the repeater list, and of filling the second repeater by adding a row to the second repeater, then deleting “This row” from the first repeater.

searchable multi-select list.rp (72.6 KB)

[pk2251]

@mbc66 ,

I took your file and moved the pill into the search box and was able to set the search field to move after a pill is added or removed. However, I set it to move by 160px. @davegoodman Do you know how I can set the search box to move based on size of the pill as that can vary? I looked into repeaters and how to set them up to filter and all that, but still getting the handle of how to use variables. Thanks for all the help! Attaching the updated file below.searchable multi-select list_Updated.rp (76.5 KB)

[davegoodman]

Hi there. I use the .right and .y functions to position the text field.

So, when I click on a row in the results repeater, one of the last interactions it triggers is to

Move FilterText to [[PillRepeater.right+5]] [[PillRepeater.y-5]]

So, this will position the FilterText field 5 pixels to the right of the right hand side (PillRepeater.right+5) of the PillRepeater widget and 5 pixels below the top left corner of the PillRepeater widget (PillRepeater.y-5). This positioning was the result of me experimenting with different values. The FilterText widget is a different size to the widget it is using as a positioning reference, hence why it needs to be a negative value. A lot of this is trial and error and reading the functions reference exhaustively.

[pk2251]

Thank you @davegoodman! That worked. Just need to figure out wrapping for the pills now, but otherwise this works.
Here is my updated file:searchable multi-select list_Updatedv2.rp (77.0 KB)

[davegoodman]

I fudged that a little - I set the standard pill length to be roughly sized for most of the items I knew I would be placing in there, then used the Substring method to truncate text if it was too long for the pill. So it would be something like:

Update Row
Column - PillContents
[[Item.Description.substr(0,20)]]…

Which would make longer pills look like
This is my pill con…

It works pretty well, though it’s not perfect.

[mbc66]

Just need to figure out wrapping for the pills now, but otherwise this works.

That turns out to be tricky with widgets in a repeater. Unfortunately, Axure doesn’t support dynamically resizing widgets in a repeater (I suppose in their defense, these then wouldn’t really be repeated.) With a little bit of javascript injection (not officially supported by Axure, but it does work) and some math this might be possible, though. See this thread for a method to resize a widget based on text length–that will enable you to set the width of your pills in the ItemLoaded event. If you use a variable to keep track of the overall width of a “row” of pills (remembering this is technically a set of rows in the repeater datasheet) then you could maybe fake the wrap to a new line. You can’t set the repeater wrapping based on width, only on the number of rows (pills in your case). When you need to wrap the pills, you could maybe add a row to another repeater and move it just below your first “pill repeater”.

Add icon after dynamic text

Yes, using a symbol font is a good solution, @Mike_Gray, and works well, especially when you need to embed an icon in the middle of a text block. However, finding, installing and testing/tweaking can sometimes make it less than simple–especially if you also need to set up web font mapping, for instance to make it work on mobile devices. If you need to use a custom icon, or one with multiple colors, states, photo image, etc. a different approach must be taken. Recently, there was a thread where…

[aniatania]

Hi everybody,

I’m working on this kind of dropdown and I did some experimenting but there’s always something wrong with it.
I need to show in the dropdown list also the items categories as it happens in the reference Multi-select boxes (see link in the prototype). If you start typing and filtering the items, the categories related to the results must always be shown at the top of them.
My draft: https://20txgv.axshare.com/#id=u5vyy0&p=draft
In dropdown 1 I managed to achieve this effect by setting additional labels outside the repeaters but this method is very difficult to manage if the categories and the repeaters are more than 3.
Could anyone help me?

Thank you so much!

Tania

search dropdown.rp (966.8 KB)

[josephxbrick]

Hi!

If this list is static (meaning that you won’t be adding new categories or entries to a given category during runtime), you can hack it like this.

Dataset:

The filter on the text field will then look like this. Note that it’s three separate expressions connected by ORs (the two pipe characters)

On Text Changed
   repeater add [[This.text == '' || Item.category_values.toLowerCase().indexOf(This.text.toLowerCase()) >= 0 || Item.value.toLowerCase().indexOf(This.text.toLowerCase()) >= 0]] remove other filters

The first expression basically says, “if the search field is blank, return true” which it will do for every row when the field is blank, so all rows are shown when blank

The second expression checks if the typed value is inside of category_values (which is responsible for showing the category, and the last does the same for the value column.

To add a new category, just follow the pattern in the dataset.

File: type-ahead-with-categories.rp (49.6 KB)

Edit: if in the example above you want typing “color” to return all colors (and the category “Colors”), change the dataset to this:

… and the filter to this:

[[This.text == '' || Item.category.toLowerCase().indexOf(This.text.toLowerCase()) >=0 || Item.category_values.toLowerCase().indexOf(This.text.toLowerCase()) >= 0 || Item.value.toLowerCase().indexOf(This.text.toLowerCase()) >= 0]]

file: type-ahead-with-categories_2.rp (49.7 KB)

[aniatania]

On Text Changed repeater add [[This.text == ‘’ || Item.category_values.toLowerCase().indexOf(This.text.toLowerCase()) >= 0 || Item.value.toLowerCase().indexOf(This.text.toLowerCase()) >= 0]] remove other filters

Great hack…

So many thanks for your help!

Tania