Using JavaScript, replicate the functionality found here.
The solution does not have to be perfect. Most important is to see how you approach such tasks.
// Fetch the data from this url and create a typeahead to filter by disease name or code
// each disease should be a in the suggestions
// there is a span class of `hl` to highlight matches
// Demo: https://medicalvalues.de/wp-content/uploads/2021/01/js_challenge.mp4
// You are free to use additional libraries or frameworks, please just do not copy the whole code from somwhere else
// Once you are done, save this fiddle and send us the url
const url = 'https://raw.githubusercontent.com/NCI-CBIIT/FHH/master/data/diseases.json';
var jsonObject = null;
fetch(url).then(r => r.json())
.then(data => jsonObject=data)
.catch(e => alert("Can't fetch JSON"))
function findProposals(inputValue) {
var foundProposals = [];
for(var i=0; i < Object.values(jsonObject).length; i++) {
for(var j=0; j < Object.values(jsonObject)[i].length; j++) {
var current = Object.values(jsonObject)[i][j];
if(current.name.includes(inputValue) || current.code.includes(inputValue)) {
foundProposals.push(current);
}
}
}
return foundProposals;
}
function displayProposal(ul, proposal) {
var li = document.createElement("li");
li.innerHTML = proposal.name + "" + proposal.abbr +"";
ul.appendChild(li);
}
function emptySuggestionsList(ul) {
while(ul.firstChild ){
ul.removeChild( ul.firstChild );
}
}
function processUserInput() {
var inputField = document.getElementById("userInput");
var inputValue = inputField.value;
var ul = document.getElementById("suggestionsList");
emptySuggestionsList(ul);
if(inputValue!="") {
var arrayOfProposals = findProposals(inputValue)
if(arrayOfProposals!=null) {
for (var i = 0; i < arrayOfProposals.length; i++) {
displayProposal(ul, arrayOfProposals[i])
}
}
}
}