JSFiddle - React, Tailwind, and code Playground

HTML

<input id="test" type="text" list="mylist" />
<datalist id="mylist"></datalist>

JavaScript

$(function () {
    // assume this data is coming from ajax call
    var data = [{
        "name": "John",
            "id": 1
    }, {
        "name": "Jane",
            "id": 2
    }, {
        "name": "Judie",
            "id": 3
    }];

    var generateDropDown = function (data) {
        var datalist = $('#mylist');

        for (var i = 0; i < data.length; i++) {
            var value = data[i].name + ' => ' + data[i].id;
            $('<option>', {
                'class': 'myclass'
            })
                .val(value)
                .data('extra', {
                'newid': data[i].id * 100
            })
                .appendTo(datalist);
        }
    };

    generateDropDown(data);

    $('#test').on('change', function (selected) {
        var val = this.value;
        var data = $(this.list.options).filter(function() {
             return this.value === val;
        }).data('extra');
    });
});