Use jquery ui autocomplete by using ReactiveHTML

Panel
6

Hi @Arifin

You can add

def __init__(self, **params):
        if not "name" in params:
            params["name"]=''
        super().__init__(**params)

Then it will behave as you want.

image

What you see is that name is special to all Parameterized classes. It acts a bit as an autogenerated, unique key if no name is provided.

Here is the full code

import panel as pn
import param

class JQuery(pn.reactive.ReactiveHTML):

    value = param.String(default='')
    options = param.List(default=[])
    name = param.String(default='')

    def __init__(self, **params):
        if not "name" in params:
            params["name"]=''
        super().__init__(**params)

    _template = """
    <div>
        <label for="tags"> ${name} </label>
        <input id="tags" value="${value}"> </input>
    </div>
    """

    _dom_events = {'tags': ['change']}

    _scripts = {
        'render':   """
            $(tags).autocomplete({source: data.options})
        """
    }

    __javascript__ = [
        "https://code.jquery.com/jquery-1.12.4.js",
        "https://code.jquery.com/ui/1.12.1/jquery-ui.js"
    ]


pn.extension()
wordlist=["apples", "pears", "bananas"]
jquery = JQuery(options=wordlist)
jquery.servable()