Any way to have st.multiselect preserve the order of my list when user is searching?

[ravila]

Hi. First post here, and I’m a huge fan of Streamlit… I’m building a data app for some visualizations related to my website visitor pathing, and I’ve got thousands of events for the user to select from as the starting node of the pathing visualization. My list of events is ordered by traffic so that low volume events are at the bottom of the list, and don’t get selected accidentally.

The issue is that when a user inputs search terms into the multiselect, it reorders the list and brings up suggested list items that are very low volume, which makes my app much harder to use effectively.

Here’s a view of the initial view of the multiselect with the event list, with highest traffic events at top:

And when I enter a search value, the results list gets reordered so that low volume events get put at the top, which is not awesome (note that the highest volume event “Common_Login_Submit” isn’t even on the top of the list):

Appreciate your help on any potential solution, this is a huge usability issue for my streamlit app!

[dataprofessor]

Hi @ravila

Have you tried sorting the list variable that was used by the st.selectbox widget.

Something like:

list_var = [‘C’, ‘A’, ‘B’]
list_var.sort()

Hope this helps!

[ravila]

Thanks. I really appreciate your help. The list is already sorted… The problem is that when we add a word in the selectbox to search for values, I really need to preserve the order of the list on the search results so that users don’t pull low volume events in error.

Here’s a code sample that shows the issue:

import streamlit as st

lov_dict=[('Add_to_Cart',50000),('Checkout_Submit',20000),('Order_Confirm',2000),('Common_Login_Submit',200000),('Make_Payment',180000),('Register',25000),('Login_Low_Volume1',5),('Login_Low_Volume2',5),('Login_Low_Volume3',5),('Login_Low_Volume4',5),('Login_Low_Volume5',1)]
sorted_lov_dict = sorted(lov_dict, key=lambda x: x[1], reverse=True)

with st.form('Select Pathing Option'):
    pathing_start_value=st.selectbox("Enter or select start value of path (please note that list is ordered descending by recent volumes):", options = ['Select a value:']+[i[0] for i in sorted_lov_dict])
    submit_pathing_field=st.form_submit_button("Submit to Pull List of Values for Next Form")
if submit_pathing_field:
    st.write(pathing_start_value)

This is a screenshot with the problem:

We have thousands of events, so this issue with search showing low volume events at the top of the search list is really a major usability issue for us. Thanks again for offering to help!

[dataprofessor]

I see, the list is dynamic and is displayed upon user entering text in the st.selectbox drop-down widget. This may require some custom solution to be able to be displayed dynamically.

If there is a lag period where user enters text into an input text box, then this could trigger a custom sorted list that is then sent to a drop-down widget with the properly sorted list to select from.