JSFiddle - React, Tailwind, and code Playground

by lforms

HTML

<link href='https://clin-table-search.lhc.nlm.nih.gov/autocomplete-lhc-versions/10.0.0/autocomplete-lhc_jQueryUI.min.css' rel="stylesheet">
<script src='https://clin-table-search.lhc.nlm.nih.gov/autocomplete-lhc-versions/10.0.0/autocomplete-lhc_jQuery.min.js'></script>

<input type="text" id="rxterms" placeholder="Drug name">
<input type="text" id="drug_strengths" placeholder="Strength list">
<input type="text" id="rxcui" placeholder="RxCUI">

JavaScript

new Def.Autocompleter.Prefetch('drug_strengths', []);
new Def.Autocompleter.Search('rxterms',
 'https://clin-table-search.lhc.nlm.nih.gov/api/rxterms/v3/search?ef=STRENGTHS_AND_FORMS,RXCUIS');
Def.Autocompleter.Event.observeListSelections('rxterms', function() {
  var drugField = $('#rxterms')[0];
  var drugName = drugField.value;
  var drugAutocomp = drugField.autocomp;
  var strengths = drugAutocomp.getItemExtraData(drugName)['STRENGTHS_AND_FORMS'];
  var rxcuis = drugAutocomp.getItemExtraData(drugName)['RXCUIS'];
  if (strengths)
    $('#drug_strengths')[0].autocomp.setListAndField(strengths, rxcuis);
});

Def.Autocompleter.Event.observeListSelections('drug_strengths', function() {
  var strengthField = $('#drug_strengths')[0];
  console.log(strengthField.value)
  $('#rxcui')[0].value = strengthField.autocomp.getItemCode(strengthField.value);
})