JSFiddle - React, Tailwind, and code Playground

by lforms

HTML

<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/26.3.1/styles/lforms.min.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/26.3.1/lforms.min.js"></script>
  <script
   src="https://clinicaltables.nlm.nih.gov/lforms-versions/26.3.1/fhir/R4/lformsFHIR.min.js"></script>
</body>

CSS

body { padding: 1em; }

JavaScript

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

LForms.Def.Autocompleter.Event.observeListSelections('loinc_item', function() {
  var formCode = ac.getSelectedCodes()[0];
  if (formCode) {
  	jQuery('#formContainer').html('Loading...');
    setTimeout(function() { // so the "loading" message has a chance to appear
      // Load the form definition
      jQuery.get('https://lforms-fhir.nlm.nih.gov/baseR4/Questionnaire/' + formCode,
        function(data) {
          LForms.Util.addFormToPage(data, 'formContainer');
        });
    });
  }
});