Pick up on `word` from the middle rather than start in pn.widgets.AutocompleteInput()

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. :+1:

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

Hi Marc

I am looking some wilde search widget as well. and it seem the solution you offer is really nice.

But I try in my env, It seems not working.


The options is not pop up. Could you please give me some suggestion about where should i start to check the issue?

Kind regards
Victor