AutoComplete for dashboard input node

Dashboard
1

Hello,
i want to use the AutoComplete function autoComplete for an dashboard input node. I tried the following flow, but i does not work.

[
    {
        "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

2

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)

3

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 but I want to send with enter and also want to allow entries they are not in list.

4

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