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:
Multi select dropdown with smart search
Autocomplete List with multiple lines
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.
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.
This thread has a good example of multi-select with repeater:
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.
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)
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)
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.
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:
Column - PillContents
Which would make longer pills look like
This is my pill con…
It works pretty well, though it’s not perfect.
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!
search dropdown.rp (966.8 KB)
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.
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)
So many thanks for your help!