Any ideas how to make
pn.widgets.AutocompleteInput(options=["some word here", "another word here", "something else"])
to pick up on the first two options ["some word here", "another word here"
with the keyword: word
2 Likes
for this user case, I used the material-ui autocomplete that have been discussed on here (Material-ui framework with ReactiveHTML - #16 by xavArtley and Material-ui framework with ReactiveHTML - #24 by xavArtley).
A preliminary ReactiveHTML
version using is autoComplete.js is shown below.
If you mature this one please share with the community.
import panel as pn
import param
class AutoCompleteInput(pn.reactive.ReactiveHTML):
options = param.List(default=[], doc="""
A list of completion strings. This will be used to guide the
user upon typing the beginning of a desired value.""")
placeholder = param.String(default='', doc="""
Placeholder for empty input field.""")
value = param.String(default='', allow_None=True, doc="""
Initial or entered text value updated when <enter> key is pressed.""")
_template = """<div class="autoComplete_wrapper">
<input id="autoCompleteInput" type="search" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off"></div>
</div>"""
__css__ = ["https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css"]
__javascript__ = ["https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"]
_scripts = {
"render": """
var config = {
selector: "#" + autoCompleteInput.id,
placeHolder: data.placeholder,
data: {
src: data.options,
cache: true,
},
resultItem: {
highlight: true
},
events: {
input: {
selection: (event) => {
const selection = event.detail.selection.value;
autoCompleteJS.input.value = selection;
data.value=selection;
}
}
}
}
console.log(config);
const autoCompleteJS = new autoComplete(config);
"""
}
component=AutoCompleteInput(
placeholder="Search for Food...",
options=["Sauce - Thousand Island", "Wild Boar - Tenderloin", "Goat - Whole Cut"],
height=150,
)
pn.template.FastListTemplate(
title="Example",
main=[component]
).servable()
2 Likes