# AutoComplete for dashboard input node

**URL:** <https://discourse.nodered.org/t/autocomplete-for-dashboard-input-node/61168>\
**Category:** Dashboard\
**Created:** [12 April 2022 11:29 UTC](https://discourse.nodered.org/t/autocomplete-for-dashboard-input-node/61168 "2022-04-12T11:29:12Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nym-J](https://avatars.discourse-cdn.com/v4/letter/n/73ab20/32.png) [@nym-J](https://discourse.nodered.org/u/nym-J)\
**Post date:** [12 April 2022 11:29 UTC](https://discourse.nodered.org/t/autocomplete-for-dashboard-input-node/61168/1 "2022-04-12T11:29:12Z")

</div>

Hello,  
i want to use the AutoComplete function [autoComplete](https://nodered.org/docs/api/ui/autoComplete/) for an dashboard input node. I tried the following flow, but i does not work.

```auto
[
    {
        "id": "afcb4312f96e6f5a",
        "type": "ui_template",
        "z": "e1abb0a1b69a98ac",
        "group": "684b159f810c3348",
        "name": "",
        "order": 4,
        "width": 0,
        "height": 0,
        "format": "\n<script>\nlet animals = [\"Aardvark\",\"Alligator\",\"Alpaca\",\"Anaconda\",\"Ant\",\"Antelope\",\n \"Carp\",\"Cat\",\"Caterpillar\",\"Catfish\",\"Cheetah\",\"Chicken\",\n \"Deer\",\"Dinosaur\",\"Dog\",\"Dolphin\",\"Donkey\",\"Dove\"];\n\n$(\"#node-input-example3\").autoComplete({\n search: function(val) {\n var matches = [];\n animals.forEach(v => {\n var i = v.toLowerCase().indexOf(val.toLowerCase());\n if (i > -1) {\n var pre = v.substring(0,i);\n var matchedVal = v.substring(i,i+val.length);\n var post = v.substring(i+val.length)\n\n var el = $('<div/>',{style:\"white-space:nowrap\"});\n $('<span/>').text(pre).appendTo(el);\n $('<span/>',{style:\"font-weight: bold; color:red\"}).text(matchedVal).appendTo(el);\n $('<span/>').text(post).appendTo(el);\n\n matches.push({\n value: v,\n label: el,\n i:i\n })\n }\n })\n matches.sort(function(A,B){return A.i-B.i})\n return matches\n }\n})\n</script>\n<input type=\"text\" id=\"node-input-example1\">",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 560,
        "y": 900,
        "wires": [
            [
                "4434ade11283b6cb"
            ]
        ]
    },
    {
        "id": "4434ade11283b6cb",
        "type": "debug",
        "z": "e1abb0a1b69a98ac",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 680,
        "y": 980,
        "wires": []
    },
    {
        "id": "684b159f810c3348",
        "type": "ui_group",
        "name": "Ausgabe",
        "tab": "28b00a41f6980e2a",
        "order": 2,
        "disp": true,
        "width": "18",
        "collapse": false,
        "className": ""
    },
    {
        "id": "28b00a41f6980e2a",
        "type": "ui_tab",
        "name": "Abrufdokument-Generator",
        "icon": "format_indent_increase",
        "order": 6,
        "disabled": false,
        "hidden": false
    }
]

```

I would be very grateful for a hint or tip

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [12 April 2022 11:47 UTC](https://discourse.nodered.org/t/autocomplete-for-dashboard-input-node/61168/2 "2022-04-12T11:47:31Z")

</div>

The `autocomplete` docs you have linked to are for the node-red editor (for developers to use when building a contrib node) - not for the dashboard.

you could always add a reference to JQuery UI (or some other autocomplete library)

---

<div class="post-metadata">

**Author:** ![nym-J](https://avatars.discourse-cdn.com/v4/letter/n/73ab20/32.png) [@nym-J](https://discourse.nodered.org/u/nym-J)\
**Post date:** [14 April 2022 06:35 UTC](https://discourse.nodered.org/t/autocomplete-for-dashboard-input-node/61168/3 "2022-04-14T06:35:22Z")

</div>

Thank you for your reply. Can anyone provide an example? I don't know much about jQuery and others. I have found this [Autocomplete dropdown UI template flow v.1.3](https://flows.nodered.org/flow/481cf035c2dbd5543e00ae94513e9ed6) but I want to send with enter and also want to allow entries they are not in list.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [14 May 2022 06:35 UTC](https://discourse.nodered.org/t/autocomplete-for-dashboard-input-node/61168/4 "2022-05-14T06:35:44Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.