TextInput with suggested entries

Community Support
1

I am trying to use a TextInput widget with a text Div widget to get suggested entries based on what is typed. What I have done so far is working but is limited because the widget “value” is only updated when the key is pressed and not when a new character is typed
Is there a way to update the value of the Textinput for each character typed ?

from bokeh.io import show
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, TextInput, Div, CustomJS
from bokeh.layouts import gridplot, widgetbox

key_list = [‘egghhhgghh’,‘oaoiadsiii’,‘oaoiuhkjh’,‘oaoiujuubnjj’,‘oaoilaklakslk’,‘albi’,‘albatros’,‘blooe’,‘zhjio’]

source = ColumnDataSource(data={key: for key in key_list})

suggestions = Div(text=‘test’,width=300,height=600)

txtinput = TextInput(title=‘test for suggested entries’)

suggestion_code = “”"
source_data = source.data;

suggestions = ‘’;

for (key in source_data) {
if(key.includes(cb_obj.value)) { suggestions = suggestions + key + ‘
’;}
}

txt.text = suggestions;
“”"

txtinput.callback = CustomJS(args={‘source’:source,‘txt’:suggestions}, code=suggestion_code)

show(widgetbox(txtinput,suggestions,width=700))

``

I am trying to do this as I have a LOT of differents variables to make available for selection in a plot. The dropdown tool does not have a scrollbar so it gets messy when the list of entries is very long.

2

You can try the auto-completion widget found here. It’s like a drop down that you can type into. Just pass in your suggestions and it’ll handle the auto-complete for you.

from bokeh.models import AutocompleteInput

options = [‘egghhhgghh’,‘oaoiadsiii’,‘oaoiuhkjh’,‘oaoiujuubnjj’,‘oaoilaklakslk’,‘albi’,‘albatros’,‘blooe’,‘zhjio’]

ac_input = AutocompleteInput(title=‘test for suggested entries’, value=options[0], completions=options)

``

3

Thank you ! I missed that widget