Auto-reloading AutoCompleteInput shows completions only after continued input

Panel
,
1

Hello!
I am trying to improve the usability of the AutoCompleteInput in my application. My AutoCompleteInput has a lot of entries, since we look through a list of present and former patients in our hospital and pick one from the list. So the moment I give the AutoCompleteInput all IDs as completions, the list of choices gets very long, rendering it hard to use. I am trying to improve the behavior by filtering the completions and in the future we might have a more intelligent way of filtering. But unfortunately, as I update the completions while the user writes into the box, they do not show up instantly but only after the user types yet another letter. So the completions always show up one step too late.

Here I wrote a minimal example that shows the behavior. Surprisingly, I also never get the output of the print statements that are within the callback, making it hard to debug, but that might be another problem.

import panel as pn
from bokeh.models.widgets.inputs import AutocompleteInput
pn.extension()

import pandas as pd
import sys
import networkx as nx
import holoviews as hv
hv.extension('bokeh')

l = [str(i) for i in range(1000000)]
df = pd.DataFrame({"items": l})

sys.path.append('..')

overlay = "##Self-reloading Autocomplete"
search_box = AutocompleteInput()
layout = pn.Column(overlay, search_box)

def sb_autocomplete_callback(query):
    print("Updated label: " + query)
    search_box.completions = df[df["items"].str.contains(query)]["items"].to_list()
    print("New suggestions")

def sb_picker_callback(item_id):
    print(f"Item {item_id} picked")

search_box.on_change('value_input', lambda attr, old, new: sb_autocomplete_callback(new))
search_box.on_change('value', lambda attr, old, new: sb_picker_callback(new))
search_box.placeholder = "Input item ID here..."

layout.show()

Any ideas on how to make the completions show up right after they were changed?

2

Hello @benelot and welcome.
Is there a reason for not using pn.widgets.AutocompleteInput ? It looks quite reactive.

import panel as pn
pn.extension()
import pandas as pd

l = [str(i) for i in range(1000000)]
df = pd.DataFrame({"items": l})

autocomplete = pn.widgets.AutocompleteInput(options = list(df['items'].values))
autocomplete.show()
3

As far as I know, pn.widgets.AutocompleteInput is the same as the bokeh one in this case. In the way you set it up, it is very reactive also with the bokeh AutoCompleteInput. But as I mentioned, we might want to filter them on our own and possibly in a different way than what AutoCompleteInput does. But I just realize that such a different filter will lead to completions that the AutoCompleteBox will then not show anyway. It might for now just be enough to limit the number of shown completions if possible and the rest might be overengineering/yagni. I will have to think about this again. Thanks for giving me that insight :slight_smile:

4

Oh I hadn’t realized that you wanted to filter with contains when the autocomplete of panel is more like a startswith.
Tabulator may be what you just need ; what you did is very close of the example in the se function based filtering section. But if you have the possibility, I guess the client-side filtering pattern will be more reactive. This is how it looks.

import pandas as pd
import panel as pn
pn.extension()
l = [str(i) for i in range(1000000)]
df = pd.DataFrame({"items": l})
pn.extension('tabulator')
tab = pn.widgets.Tabulator(df,header_filters=True,page_size=10)