How to only show datapoints which is selected in the textfield or dropdown menu

Hello,
I want to program a autofill textfield and if the user type ABC, only the datapoints which belong to ABC should appear.

The autofill textfield works fine, but how can i implemented the textfield with plotly.plot function? I use plotly.plot for JavaScript coding.


//Javascript for Autofill function
$( function() {
    var dataset = [
      "Dataset1",
      "Dataset2",
      "Dataset3",
      "Dataset4"
      
    ];
    $( "#dmc" ).autocomplete({
      source: availabledmc
    });```


//Values in the datapoints:
var dataPoints = {
"dps1": [
    { "x": "2016-6-25 12:58:52", "y": 10.22 },
    { "x": "2016-7-25 13:33:23", "y": 11.14 },
    { "x": "2016-8-25 13:49:18", "y": 13.58 },
    { "x": "2016-9-25 13:55:01", "y": 15.25 },
    { "x": "2016-10-25 14:00:15", "y": 17.25 },
],
"dps2": [
     { "x": "2016-6-25 12:58:52", "y": 19.99 },
     { "x": "2016-7-25 13:33:23", "y": 21.78 },
     { "x": "2016-8-25 13:49:18", "y": 23.45 },
     { "x": "2016-9-25 13:55:01", "y": 24.73 },
     { "x": "2016-10-25 14:00:15", "y": 26.58 }
],
"dps3": [
    { "x": "2016-6-25 12:58:52", "y": 27.66 },
    { "x": "2016-7-25 13:33:23", "y": 28.68 },
    { "x": "2016-8-25 13:49:18", "y": 30.73 },
    { "x": "2016-9-25 13:55:01", "y": 32.46 },
    { "x": "2016-10-25 14:00:15", "y": 34.79 }
],
"dps4": [
    { "x": "2016-6-25 12:58:52", "y": 10.22 },
    { "x": "2016-7-25 13:33:23", "y": 11.14 },
    { "x": "2016-8-25 13:49:18", "y": 15.25 },
    { "x": "2016-9-25 13:55:01", "y": 19.99 },
    { "x": "2016-10-25 14:00:15", "y": 21.78 }
],


var dataPoints = []
Plotly.newPlot('myDiv', dataPoints, layout);


Here is my question? why does it no work?
How to connect the autofill TextBox with the graph? So I can only see the datasets which the user wants to see? either way, if he types nothing -> Show everything.


Thanks
three reasons why you should buy plotly pro: support open source, get great support, host your plots and dashboards online