JSFiddle - React, Tailwind, and code Playground

by cbruen1

HTML

<div>
    <input class="blaszid" data-bind="value: currentBatch.Proteins()[1].BlaszidID" data-val="true" data-val-length="The field Blaszid Structure ID must be a string with a maximum length of 25." data-val-length-max="25" id="Proteins_1__BlaszidID" name="Proteins[1].BlaszidID" style="width: 70%;" type="text" value="" /><span class="field-validation-valid" data-valmsg-for="Proteins[1].BlaszidID" data-valmsg-replace="true"></span>
</div>
<div>
    <input class="blaszid" data-bind="value: currentBatch.Proteins()[2].BlaszidID" data-val="true" data-val-length="The field Blaszid Structure ID must be a string with a maximum length of 25." data-val-length-max="25" id="Proteins_2__BlaszidID" name="Proteins[2].BlaszidID" style="width: 70%;" type="text" value="" /><span class="field-validation-valid" data-valmsg-for="Proteins[2].BlaszidID" data-valmsg-replace="true"></span>
</div>
<div>
    <input class="blaszid" data-bind="value: currentBatch.Proteins()[3].BlaszidID" data-val="true" data-val-length="The field Blaszid Structure ID must be a string with a maximum length of 25." data-val-length-max="25" id="Proteins_3__BlaszidID" name="Proteins[3].BlaszidID" style="width: 70%;" type="text" value="" /><span class="field-validation-valid" data-valmsg-for="Proteins[3].BlaszidID" data-valmsg-replace="true"></span>
</div>
<div>
    <input class="blaszid" data-bind="value: currentBatch.Proteins()[0].BlaszidID" id="Proteins_0__BlaszidID" name="Proteins[0].BlaszidID" style="width: 70%;" type="text" value="" /><span class="field-validation-valid" data-valmsg-for="Proteins[0].BlaszidID" data-valmsg-replace="true"></span>
</div>
<div>
    <input class="blaszid" data-bind="value: currentBatch.Proteins()[1].BlaszidID" id="Proteins_1__BlaszidID" name="Proteins[1].BlaszidID" style="width: 70%;" type="text" value="" /><span class="field-validation-valid" data-valmsg-for="Proteins[1].BlaszidID" data-valmsg-replace="true"></span>
</div>
<div>
    <input class="blaszid" data-bind="value:...

JavaScript

$(".blaszid")
    .autocomplete({
    source: getBlaszids(),
    focus: function (event, ui) {
        $(event.target).val(ui.item.value);
        return false;
    },
    select: function (event, ui) {}
})
    .each(function () {
    $(this).data("ui-autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("ui-autocomplete-item", item)
            .append("<a><strong>Structure ID: " + item.name +
            "</strong><br>" + "Nickname: " + item.nickname + "</a>")
            .appendTo(ul);
    };
});

function getBlaszids() {

    var x = [{
        "value": "PB70-77HE",
        "name": "PB70-77HE",
        "nickname": "pUC57_P2Y6"
    }, {
        "value": "PQ27-01EC",
        "name": "PQ27-01EC",
        "nickname": "PlMB-4089_pET28a"
    }, {
        "value": "PT48-81WD",
        "name": "PT48-81WD",
        "nickname": "PlMB-4328_pET28"
    }, {
        "value": "PP60-85CE",
        "name": "PP60-85CE",
        "nickname": "pNVS-RSV REV"
    }, {
        "value": "PH75-32HF",
        "name": "PH75-32HF",
        "nickname": "PlMB-4246_pMA"
    }, {
        "value": "PN06-13CE",
        "name": "PN06-13CE",
        "nickname": "PlMB-4448_pMA-T"
    }, {
        "value": "YX33-02PC",
        "name": "YX33-02PC",
        "nickname": "pO4"
    }, {
        "value": "TX85-24PA",
        "name": "TX85-24PA",
        "nickname": "PlMB-4013_pET28a"
    }, {
        "value": "PT79-89UD",
        "name": "PT79-89UD",
        "nickname": "FP Fab 10489 HC pRS5a_1"
    }, {
        "value": "PE43-73VF",
        "name": "PE43-73VF",
        "nickname": "pNAT2962"
    }];

    return x;
}

function getProteins2() {

    var x = [{
        "value": "PB70-77HE",
            "label": "PB70-77HE",
            "geneSymbol": "Gene 1",
            "uniProtId": "Uni 1",
            "proteinName": "Prot 1"
    }, {
        "value": "PQ27-01EC",
            "label": "PQ27-01EC",
            "geneSymbol": "Gene 1",
            "uniProtId":...