JSFiddle - React, Tailwind, and code Playground

by lforms

HTML

<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/34.0.0/webcomponent/styles.css" media="screen" rel="stylesheet" />
  <p>
    Select a LOINC form display:
  </p>
  <input type="text" id="loinc_item" placeholder="LOINC item" autocomplete="off" role="combobox" aria-expanded="false" class="search_field">
  <p>
    Note: LOINC form definitions are subject to the LOINC <a href="http://loinc.org/terms-of-use">terms of use</a>.
  </p>
  <div id="formContainer">
  </div>
  <script
   src="https://clinicaltables.nlm.nih.gov/lforms-versions/34.0.0/webcomponent/assets/lib/zone.min.js"></script>
  <script
   src="https://clinicaltables.nlm.nih.gov/lforms-versions/34.0.0/webcomponent/lhc-forms.js"></script>
  <script
   src="https://clinicaltables.nlm.nih.gov/lforms-versions/34.0.0/fhir/R4/lformsFHIR.min.js"></script>
</body>

CSS

body {
  padding: 0.5em;
}

JavaScript

var ac = new LForms.Def.Autocompleter.Search('loinc_item',
  'https://clinicaltables.nlm.nih.gov/api/loinc_items/v3/search?type=form&available=true');

LForms.Def.Autocompleter.Event.observeListSelections('loinc_item', function() {
  var formCode = ac.getSelectedCodes()[0];
  console.log("formCode ="+formCode);
  if (formCode) {
  	document.getElementById('formContainer').textContent = 'Loading...';
    setTimeout(function() { // so the "loading" message has a chance to appear
      // Load the form definition
      const formURL= 'https://clinicaltables.nlm.nih.gov/loinc_form_definitions?loinc_num=' + formCode;
      fetch(formURL).then(resp=>resp.json()).then(data=>{
        LForms.Util.addFormToPage(data, 'formContainer');
      });
    });
  }
});