How can I add a user input box , that gives an auto complete suggestion from a list , but also allows user too input its own query

Custom Components
1

My application takes a query, runs it through the model and answers the query. I want to add an option where the user can see suggestion from a dropdown and if selected directly outputs the answer, but if a user doesnt select from the dropdown, they can type their own query which will run through the model

image
image1506×593 20.9 KB

The drop down suggestion will be coming from this csv file, column = “question”

image
image1365×113 4.98 KB

2 Likes
2

Hi @Hiba_Fatima, and welcome to the Streamlit community! :balloon: :raised_hands:

Auto completion wouldn’t be possible, however you can pass a list of values from your csv, as follows:

df = pd.read_csv('data.csv')  
col_one_list = df['one'].tolist()
selectbox_01 = st.selectbox('Select', col_one_list)

Would that be ok for your use case?

Best,
Charly

1 Like
3

hey @Charly_Wargnier
What I am hoping too achieve is, that it also allows a user to input a question, if not selected from the dropdown/list

2 Likes
4

Sure @Hiba_Fatima

For text inputs, you can use:

st.text_input('Enter some text')

Let us know how it goes! :slight_smile:

Thanks,
Charly

1 Like
5

@Charly_Wargnier st.text_input, is what I used initially,

What I need is:
user would like a pre-canned list, but the option to enter anything custom (a question that wasnt there in the list).
It would be great if the selectbox can be also used as text_input
is there a way around this?

3 Likes
6

You may want to try @gagan3012’s component for this: GitHub - gagan3012/streamlit-tags: Custom Tag component for streamlit

Best,
Charly

7

@Charly_Wargnier

image
image698×275 11.9 KB

I was hoping something along these line, where you can choose a query from the dropdown list, but if you dont find your query in the dropdown, you can go ahead and enter your own query.

Wherein (text_input) only lets you input a query, and st.selectbox only lets you pick the query from a given list.

I did go through streamlit tags, doesnt apply to my use case!

Kind Regards

8

As I said above, auto-complete is not yet available in Streamlit.

I’ll pass your suggestion to the Devs :slight_smile:

Best,
Charly

1 Like
9

@Hiba_Fatima
Streamlit tags does offer a different style of auto-complete check it

3 Likes
10

Wow! This is amazing!

Is the auto completion based on a pre defined list?

11

Yes, we can define it based on a predefined list:

def st_tags(value: list,
            suggestions: list,
            label: str,
            text: str,
            maxtags: int,
            key=None) -> list:
    '''
    :param maxtags: Maximum number of tags allowed maxtags = -1 for unlimited entries
    :param suggestions: (List) List of possible suggestions (optional)
    :param label: (Str) Label of the Function
    :param text: (Str) Instructions for entry
    :param value: (List) Initial Value (optional)
    :param key: (Str)
        An optional string to use as the unique key for the widget.
        Assign a key so the component is not remount every time the script is rerun.
    :return: (List) Tags
        
    Note: usage also supports keywords = st_tags()```
3 Likes
12

This is great! :star_struck:

thanks for creating this Gagan!

1 Like
13

Streamlit_tags has not got a lot reach so far
Thank you @Charly_Wargnier for sharing about it here!

1 Like
14

You’re very welcome! Well deserved! :raised_hands:

15

Streamlit_tags is a great component though, I still think it should be officially incorporated into Streamlit

1 Like
16

Is there any update on a native implementation for this feature?

1 Like
17

I am also very interested in this feature

18

Make sure you vote on the open issues so the devs can track popularity of feature requests:

Also, for anyone late to the party, there is a related custom component: New Component: Searchbox

19

Hello @Hiba_Fatima , did you find a solution for this?

Kind Regards