<html>

<head>
  <title>Autcomplete-lhc example for RxTerms</title>
  <link href='https://lhcforms-static.nlm.nih.gov/autocomplete-lhc-versions/17.0.3/autocomplete-lhc.min.css' rel="stylesheet">
</head>

<body>
  Drug Name: <input type="text" id="rxterms" placeholder="Drug name">
  <p>
  Strength: <input type="text" id="drug_strengths" placeholder="Strength list">
  <p>
  Code (RxCUI): <input type="text" id="rxcui" placeholder="RxCUI">
  
  <p>This <a href="http://lhncbc.github.io/autocomplete-lhc/" target=_blank
  >autocomplete-lhc</a> example uses the <a
  href="https://clinicaltables.nlm.nih.gov/apidoc/rxterms/v3/doc.html"
  target=_blank>RxTerms API</a> of the <a
  href="https://clinicaltables.nlm.nih.gov" target=_blank
  >Clinical Table Search Service</a>.</p>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- example CDN-- you may choose another source --> 
  <script src='https://lhcforms-static.nlm.nih.gov/autocomplete-lhc-versions/17.0.3/autocomplete-lhc.min.js'></script>

  <script>
    // Create drug list for the name field
    new Def.Autocompleter.Search('rxterms',
      'https://clinicaltables.nlm.nih.gov/api/rxterms/v3/search?ef=STRENGTHS_AND_FORMS,RXCUIS');
      
    // Create an initially empty list for the strength field
    new Def.Autocompleter.Prefetch('drug_strengths', []);
      
    // Populate the strength list after the user selects a drug name
    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);
    });

    // Fill in the RxCUI field after the user selects a strength
    Def.Autocompleter.Event.observeListSelections('drug_strengths', function(data) {
      $('#rxcui')[0].value = data.item_code;
    })
  </script>
</body>

</html>