jquery – Display full WordPress post under search form using AJAX

Question

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 += '</div><div 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": "<h4>References</h4>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."
 }
 ]
</script>

AND THIS WAS THE SEARCH BOX:

<div class="searchForm">
    <form role="form">
        <div class="form-group">
            <label>Search 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>

0
nic 3 months 2022-05-23T02:02:13-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse