<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>