Display full WordPress post under search form using AJAX

Hi I am currently creating a site that shows interactions between different pharmaceutical drugs. I originally started with Live search on JSON Objects Data Using jQuery (originally based on this article: https://www.js-tutorials.com/jquery-tutorials/live-search-json-objects-data-using-jquery/ but modified slightly below) however the client must be able to add constant content and a JSON file was too difficult for them to edit. I am now creating a page for each drug as a WordPress post (and perhaps use a tag to distinguish it for search) and would like people to search for that drug (eg codeine) using ajax. But instead of showing a small description of the search (like all ajax searches i've been able to find), I want to show the whole post’s content on that same page just below the search bar. I'm currently using a builder (DIVI) but happy to do whatever works as long as the output is styled nicely. This was our original code. Any help would be greatly appreciated as I'm not terrifically techy!

THIS WAS THE CODE:

script src=https://code.jquery.com/jquery-1.9.1.min.js/script
script 
$( document ).ready(function() {
 $('#txt-search').keyup(function(){
 var searchField = $(this).val();
 if(searchField === '')  {
 $('#filter-records').html('');
 return;
 }
 var regex = new RegExp(^ + searchField, i);
 var output = 'div class=row';
 var count = 1;

 $.each(data, function(key, val){   
var colorClass = 'alertButtonGreen';
   
if ((val.id.search(regex) != -1) || (val.id.search(regex) != -1)) {

if (val.warningsColor == 'Red') {
  colorClass = 'alertButtonRed';
} else if (val.warningsColor == 'Orange') {
  colorClass = 'alertButtonOrange';
}
   
 output += 'div class=contentWrap';
 output += 'div class=';
 output += 'h2' + val.id + '/h2';
 output += 'h3' + val.headingTitle + '/h3'
 output += 'div class=alertButton ' + colorClass + '' + val.warningsButton + '/div'
 output += 'p' + val.contentText + '/p';
 output += 'div class=superScript' + val.superscriptText + '/div';
 output += '/div';
 output += '/div';
 if(count%2 == 0){
 output += '/divdiv class=row'
 }
 count++;
 }
 });
 output += '/div';
 $('#filter-records').html(output);
 });
});
  var data = [
 {
 id: Codeine, 
 headingTitle: Drug Interactions between Codeine and Alcohol,
 warningsTitle: Interactions between your drugs,
 warningsButton: Major Interaction,
 warningsColor: Red,
 contentText: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.,
 interactionsTitle: Drug Interaction Classification,
 moreInfo: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
 superscriptText: h4References/h4Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
 }
 ]
/script

AND THIS WAS THE SEARCH BOX:

div class=searchForm
    form role=form
        div class=form-group
            labelSearch Drug Interactions/label input type=input class=form-control input-lg id=txt-search placeholder=Enter Drug Name
        /div  
    /form
        /div
    div id=filter-records/div