jQuery Search Page Filter - display only h4 headings that contain matching content and return 'no match' when no matches are found

Following on from another post, here: https://stackoverflow.com/questions/76211808/jquery-search-page-filter-add-condition-that-displays-no-match-when-no-match

The function below shows all of the h4 headings on the page when the page is searched. h4s with content that match the search term show the matching results beneath the heading, and h4s with no matching content show 'no results' beneath the heading.

Fiddle here: https://jsfiddle.net/mfen723/7kqh6uwb/16/

  $(document).ready(function () {
        $("#searchInput").on("keyup", function () {
          var value = $(this).val().toLowerCase();
          $("#research > :not(h4)").each(function () {
            $(this).toggle(
              $(this).text().toLowerCase().indexOf(value) > -1
            );
          });
          $("#research h4").each(function () {
            $(this)
              .nextAll(".noresults")
              .first()
              .toggle(
                $(this).nextUntil("h4").filter("p:visible").length == 0
              );
          });
        });
      });

Instead of showing all of the h4 headings when the page is searched, I want the function to show only the h4 headings that match (along with the matching content within the p tags) and to show 'no results' only when there are no matches on the page.

Any help much appreciated.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function () {
  $("#searchInput").on("keyup", function () {
    var value = $(this).val().toLowerCase();
    $("#research > :not(h4)").each(function () {
      $(this).toggle(
        $(this).text().toLowerCase().indexOf(value) > -1
      );
    });
    $("#research h4").each(function () {
      $(this)
        .nextAll(".noresults")
        .first()
        .toggle(
        $(this).nextUntil("h4").filter("p:visible").length == 0
      );
    });
  });
});

<!-- language: lang-css -->

.search {
  display: block !important;
  position: relative;
  background-color: var(--bg-light);
}

.search input {
  text-indent: 25px;
}

.search input:focus {
  box-shadow: none;
  border: 2px solid var(grey);
}

.search input.form-control {
  display: block !important;
  width: 700px !important;
}

.search .fa-search {
  position: absolute;
  top: 10px;
  left: 15px;
  font-size: 2rem;
  z-index: 12;
}

/* Hide nor results div */

h4 ~ div.noresults {
	margin-bottom: 2em;
	font-style: italic;
	display: none;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="search">
<div class="container">
<div class="col-lg-9 mx-auto" id="research">
<div class="search my-4">
<input type="text" class="form-control mx-auto" id="searchInput" placeholder="Search resources">
</div>
<h4 class="sub-heading-alt-resources pb-3" id="#methodologies">Research</h4>
<p>Ricardo R Bartelme, <a href="https://journals.sagepub.com/doi/10.1177/2164956120973634" target="_blank" rel="no-referrer">Anthroposophic Medicine: A Short Monograph and Narrative Review—Foundations, Essential Characteristics, Scientific Basis, Safety, Effectiveness and Misconceptions</a>, published 29 December 2020 in Pub Med, doi 10.1177/2164956120973634</p>
<p>Mehl A, Brauer D, Didwiszus A, Gelin-Kröz B, Pranga D, Zerm R, Gutenbrunner C (2020), <a href="https://www.sciencedirect.com/science/article/abs/pii/S155083072030224X" target="_blank" rel="no-referrer">The Anthroposophic Art Therapy Assessment Paint (AART-ASSESS-P): A peer-report instrument to assess patients’ pictorial expression during Anthroposophic Painting Therapy</a></p>
<p>Lees J (2001) <a href="https://www.researchgate.net/publication/238318617_Reflexive_action_research_Developing_knowledge_through_practice">Reflexive Action Research: Developing Knowledge Through Practice: Counselling and Psychotherapy Research</a> (2001), August 2001, Counselling and Psychotherapy Research 1(2):132-138, <a href="https://onlinelibrary.wiley.com/doi/abs/10.1080/14733140112331385178" target="_blank" rel="no-referrer">DOI:10.1080/14733140112331385178</a></p>
<p>Shlonsky A and Gobbs L, <a href="https://www.researchgate.net/publication/247903648_Will_the_Real_Evidence-Based_Practice_Please_Stand_Up_Teaching_the_Process_of_Evidence-Based_Practice_to_the_Helping_Professions" target="_blank" rel="no-referrer">Will the Real Evidence-Based Practice Please Stand Up? Teaching the Process of Evidence-based Practice to the Helping Professions. Brief Treatment and Criss Intervention.</a> Vol 4. No. 2., January 2004, Brief Treatment and Crisis Intervention 4(2):137-153, <a href="http://mr.crossref.org/iPage?doi=10.1093%2Fbrief-treatment%2Fmhh011" target="_blank" rel="no-referrer">DOI:10.1093/brief-treatment/mhh011</a></p>
<p>Kienle G S, Albonico H U, Baars E, Hamre H J, Zimmermann P, Kiene H (2013). <a href="https://www.hsleiden.nl/binaries/content/assets/hsl/lectoraten/antroposofische-gezondheidszorg/artikelgaiham.pdf" target="_blank" rel="no-referrer">(pdf, 882 KB )Anthroposophic Medicine: An Integrative Medical System Originating in Europe. ( pdf, 882 KB )</a> Global Advances In Health And Medicine November 2013, Volume 2, Number 6</p>
<p>Abbing A, Ponstein A, Kienle G, Gruber H, Baars E (2016) The CARE-AAT Guideline: <a href="https://www.tandfonline.com/doi/pdf/10.1080/17454832.2016.1170054?needAccess=true">Development and testing of a consensus-based guideline for case reports in anthroposophic art therapy.</a><a href="https://www.tandfonline.com/doi/pdf/10.1080/17454832.2016.1170054?needAccess=true" target="_blank" rel="no-referrer">International Journal of Art Therapy, DOI: 10.1080/17454832.2016.1170054</a></p>
<div class='noresults'>no results</div>
<div class='noresults'>no results</div>
<h4 class="sub-heading-alt-resources pt-3" id="pregnancy">Pregnancy, Birth and Early childhood</h4>
<p>Gollmer B (15.01.2019) <a href="https://www.anthromedics.org/PRA-0779-EN" target="_blank">Painting Therapy in Pregnancy and Preparation for Childbirth</a> (professional information)</p>
<p>Gollmer B (19.07.2019) <a href="https://www.anthromedics.org/PRA-0781-EN" target="_blank">Painting Therapy in Pregnancy and Birth Preparation</a> (parent information)</p>
<p>Bissegger M (07.06.2019) <a href="https://www.anthromedics.org/PRA-0805-EN" target="_blank">Music Therapy for Premature Infants and their Mothers</a></p>
<p>Bissegger M (02.01.2020) <a href="https://www.anthromedics.org/PRA-0907-EN" target="_blank">Music Therapy for Babies and Toddlers</a></p>
<p>Bissegger M (02.01.2020) <a href="https://www.anthromedics.org/PRA-0905-EN" target="_blank">Singing and Music for Babies and Toddlers</a> (parent information) ​</p>
<div class='noresults'>no results</div>
<h4 class="sub-heading-alt-resources" id="child-health">Child Health</h4>
<p>Hamre HJ et al. (2009) <a href="https://www.researchgate.net/publication/26309949_Anthroposophic_therapy_for_children_with_chronic_disease_A_two-year_prospective_cohort_study_in_routine_outpatient_settings" target="_blank">Anthroposophic therapy for children with chronic disease: a two-year Prospective Cohort Study in Routine Outpatient Settings</a>. BMC Pediatr 2009; 9:39. DOI 10.1186/1471-2431-9-39</p>
<p>Abbing A, Krantz B, Simon E, Heynen E, De Witte M and Van Hooren S (2020). <a href="https://www.crd.york.ac.uk/prospero/display_record.php?ID=CRD42020162709" target="_blank">Effectiveness of Music Therapy Interventions in Reducing Behavioural and Emotional Problems Among Children</a>. PROSPERO 2020. CRD42020162709</p>
<p>Baars E W, Koster E B, Schoorel E P (2012).<a href="https://www.researchgate.net/publication/282149760_Client_experiences_with_an_integrated_conventional_and_anthroposophic_approach_at_the_Kindertherapeuticum_in_Zeist" target="_blank">Client experiences with an integrated conventional and anthroposophic approach at the Kindertherapeuticum in Zeist</a>. Der Merkurstab, 4:335-338</p>
<p>Niemeijer M H, Baars E W, Hoekman J, Ruijssenaars A J J M (2018) <a href="https://www.researchgate.net/publication/330164731_An_Instrument_for_Dimensional_Diagnosis_of_a_Child_Constitution_ICC_Individualizing_the_Care_for_Children_with_Developmental_Disorders" target="_blank">An instrument for dimensional diagnosis of a child’s constitution (ICC)</a>. International Journal of Complementary & Alternative Medicine, Issue 2-2018.</p>
<p>Niemeijer M H, Baars E W, Hoekman J, and Ruijssenaars A J J M (2018). <a href="https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fjournal.julypress.com%2Findex.php%2Fijsn%2Farticle%2Fdownload%2F531%2F401&data=04%7C01%7Cbaars.e%40hsleiden.nl%7C806fd3cb33754902a30908d92b842ba7%7C850f9344e078467e9c5e84d82f208ac7%7C1%7C0%7C637588668989923315%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=RinbscVUm36ksES%2F4dpv3pCSyMP6bzjQFJ8WPTt0yBM%3D&reserved=0" target="_blank">Validity and Reliability of the Instrument for Assessing the Child’s Constitution (ICC): Individualising Processes in Diagnosing Children With a Developmental Disorder</a> . International Journal of Studies in Nursing, 3(3), 172.</p>
<div class='noresults'>no results</div>
<h4 class="sub-heading-alt-resources" id="infectious">Infectious and chronic diseases</h4>
<p>Hamre H J. Witt C M, Glockmann A, Ziegler R (July 2007) <a href="https://www.researchgate.net/publication/6158737_Anthroposophic_Art_Therapy_in_Chronic_Disease_A_Four-Year_Prospective_Cohort_Study" target="_blank">Anthroposophic Art Therapy in Chronic Disease: A Four-Year Prospective Cohort Study</a> The Journal of Science and Healing 3(4):365-71, Doi: 10.1016/j.explore.2007.04.008,</p>
<p>Hamre H J et al. (2004). <a href="https://www.researchgate.net/publication/8374153_Anthroposophic_therapies_in_chronic_disease_The_Anthroposophic_Medicine_Outcomes_Study_AMOS" target="_blank">Anthroposophic therapies in chronic disease: The Anthroposophic Medicine Outcomes Study (AMOS)</a>. European Journal of Medical Research 2004; 9:351-360</p>
<p>Hamre H J et al. (2007) <a href="https://www.researchgate.net/publication/6158737_Anthroposophic_Art_Therapy_in_Chronic_Disease_A_Four-Year_Prospective_Cohort_Study" target="_blank">Anthroposophic Art Therapy in Chronic Disease: a four-year prospective cohort study</a>. Explore (NY). 2007 Nov-Dec;3(6):553</p>
<p>Hamre HJ et al. (2013). <a href="https://www.researchgate.net/publication/249318203_Long-term_outcomes_of_anthroposophic_treatment_for_chronic_disease_A_four-year_follow-up_analysis_of_1510_patients_from_a_prospective_observational_study_in_routine_outpatient_settings" target="_blank">Long-term Outcomes of Anthroposophic Treatment for Chronic Disease: A four-year follow-up Analysis of 1510 Patients from a Prospective Observational Study in routine outpatient settings</a> BMC Research Notes. 2013;6(1):269. DOI: <a href="https://doi.org/10.1186/1756-0500-6-269" target="_blank">https://doi.org/10.1186/1756-0500-6-269</a></p>
<div class='noresults'>no results</div>
<h4 class="sub-heading-alt-resources" id="covid">COVID-19</h4>
<p>Martin D, Soldner G (2020) <a href="https://www.anthromedics.org/PRA-0971-EN" target="_blank">A synthesis review of current status and proposal of a registry study to overcome social polarization tendencies and answer open research questions</a></p>
<p>Soldner G, Breitkreuz T (2020) <a href="https://www.anthromedics.org/PRA-0939-EN" target="_blank">COVID-19</a> </p>
<div class='noresults'>no results</div>
</div>
</div>
</section>

<!-- end snippet -->

It looks hard to achieve this on this HTML structure .. But anyway you can try the next code

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function () {
$("#searchInput").on("keyup", function () {
const value = $(this).val().toLowerCase();
$('#research .noresults, #research h4 , #research p').css('display' , 'none');
const filter_p = $("#research p").filter(function () {
return ($(this).text().toLowerCase()).indexOf(value) > -1;
});
filter_p
.css('display' , 'block')   //<<<<<<<<
.prevUntil('h4')
.prev('h4')
.css('display' , 'block');
$('#research h4')
.not(filter_p.prevUntil('h4').prev('h4'))
.nextUntil('.noresults')
.next('.noresults')
.css('display' , 'block');
});
});

<!-- language: lang-css -->

.search {
  display: block !important;
  position: relative;
  background-color: var(--bg-light);
}

.search input {
  text-indent: 25px;
}

.search input:focus {
  box-shadow: none;
  border: 2px solid var(grey);
}

.search input.form-control {
  display: block !important;
  width: 700px !important;
}

.search .fa-search {
  position: absolute;
  top: 10px;
  left: 15px;
  font-size: 2rem;
  z-index: 12;
}

/* Hide nor results div */

h4 ~ div.noresults {
	margin-bottom: 2em;
	font-style: italic;
	display: none;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="search">
<div class="container">
<div class="col-lg-9 mx-auto" id="research">
<div class="search my-4">
<input type="text" class="form-control mx-auto" id="searchInput" placeholder="Search resources">
</div>
<h4 class="sub-heading-alt-resources pb-3" id="#methodologies">Research</h4>
<p>Ricardo R Bartelme, <a href="https://journals.sagepub.com/doi/10.1177/2164956120973634" target="_blank" rel="no-referrer">Anthroposophic Medicine: A Short Monograph and Narrative Review—Foundations, Essential Characteristics, Scientific Basis, Safety, Effectiveness and Misconceptions</a>, published 29 December 2020 in Pub Med, doi 10.1177/2164956120973634</p>
<p>Mehl A, Brauer D, Didwiszus A, Gelin-Kröz B, Pranga D, Zerm R, Gutenbrunner C (2020), <a href="https://www.sciencedirect.com/science/article/abs/pii/S155083072030224X" target="_blank" rel="no-referrer">The Anthroposophic Art Therapy Assessment Paint (AART-ASSESS-P): A peer-report instrument to assess patients’ pictorial expression during Anthroposophic Painting Therapy</a></p>
<p>Lees J (2001) <a href="https://www.researchgate.net/publication/238318617_Reflexive_action_research_Developing_knowledge_through_practice">Reflexive Action Research: Developing Knowledge Through Practice: Counselling and Psychotherapy Research</a> (2001), August 2001, Counselling and Psychotherapy Research 1(2):132-138, <a href="https://onlinelibrary.wiley.com/doi/abs/10.1080/14733140112331385178" target="_blank" rel="no-referrer">DOI:10.1080/14733140112331385178</a></p>
<p>Shlonsky A and Gobbs L, <a href="https://www.researchgate.net/publication/247903648_Will_the_Real_Evidence-Based_Practice_Please_Stand_Up_Teaching_the_Process_of_Evidence-Based_Practice_to_the_Helping_Professions" target="_blank" rel="no-referrer">Will the Real Evidence-Based Practice Please Stand Up? Teaching the Process of Evidence-based Practice to the Helping Professions. Brief Treatment and Criss Intervention.</a> Vol 4. No. 2., January 2004, Brief Treatment and Crisis Intervention 4(2):137-153, <a href="http://mr.crossref.org/iPage?doi=10.1093%2Fbrief-treatment%2Fmhh011" target="_blank" rel="no-referrer">DOI:10.1093/brief-treatment/mhh011</a></p>
<p>Kienle G S, Albonico H U, Baars E, Hamre H J, Zimmermann P, Kiene H (2013). <a href="https://www.hsleiden.nl/binaries/content/assets/hsl/lectoraten/antroposofische-gezondheidszorg/artikelgaiham.pdf" target="_blank" rel="no-referrer">(pdf, 882 KB )Anthroposophic Medicine: An Integrative Medical System Originating in Europe. ( pdf, 882 KB )</a> Global Advances In Health And Medicine November 2013, Volume 2, Number 6</p>
<p>Abbing A, Ponstein A, Kienle G, Gruber H, Baars E (2016) The CARE-AAT Guideline: <a href="https://www.tandfonline.com/doi/pdf/10.1080/17454832.2016.1170054?needAccess=true">Development and testing of a consensus-based guideline for case reports in anthroposophic art therapy.</a><a href="https://www.tandfonline.com/doi/pdf/10.1080/17454832.2016.1170054?needAccess=true" target="_blank" rel="no-referrer">International Journal of Art Therapy, DOI: 10.1080/17454832.2016.1170054</a></p>
<div class='noresults'>no results</div>
<div class='noresults'>no results</div>
<h4 class="sub-heading-alt-resources pt-3" id="pregnancy">Pregnancy, Birth and Early childhood</h4>
<p>Gollmer B (15.01.2019) <a href="https://www.anthromedics.org/PRA-0779-EN" target="_blank">Painting Therapy in Pregnancy and Preparation for Childbirth</a> (professional information)</p>
<p>Gollmer B (19.07.2019) <a href="https://www.anthromedics.org/PRA-0781-EN" target="_blank">Painting Therapy in Pregnancy and Birth Preparation</a> (parent information)</p>
<p>Bissegger M (07.06.2019) <a href="https://www.anthromedics.org/PRA-0805-EN" target="_blank">Music Therapy for Premature Infants and their Mothers</a></p>
<p>Bissegger M (02.01.2020) <a href="https://www.anthromedics.org/PRA-0907-EN" target="_blank">Music Therapy for Babies and Toddlers</a></p>
<p>Bissegger M (02.01.2020) <a href="https://www.anthromedics.org/PRA-0905-EN" target="_blank">Singing and Music for Babies and Toddlers</a> (parent information) ​</p>
<div class='noresults'>no results</div>
<h4 class="sub-heading-alt-resources" id="child-health">Child Health</h4>
<p>Hamre HJ et al. (2009) <a href="https://www.researchgate.net/publication/26309949_Anthroposophic_therapy_for_children_with_chronic_disease_A_two-year_prospective_cohort_study_in_routine_outpatient_settings" target="_blank">Anthroposophic therapy for children with chronic disease: a two-year Prospective Cohort Study in Routine Outpatient Settings</a>. BMC Pediatr 2009; 9:39. DOI 10.1186/1471-2431-9-39</p>
<p>Abbing A, Krantz B, Simon E, Heynen E, De Witte M and Van Hooren S (2020). <a href="https://www.crd.york.ac.uk/prospero/display_record.php?ID=CRD42020162709" target="_blank">Effectiveness of Music Therapy Interventions in Reducing Behavioural and Emotional Problems Among Children</a>. PROSPERO 2020. CRD42020162709</p>
<p>Baars E W, Koster E B, Schoorel E P (2012).<a href="https://www.researchgate.net/publication/282149760_Client_experiences_with_an_integrated_conventional_and_anthroposophic_approach_at_the_Kindertherapeuticum_in_Zeist" target="_blank">Client experiences with an integrated conventional and anthroposophic approach at the Kindertherapeuticum in Zeist</a>. Der Merkurstab, 4:335-338</p>
<p>Niemeijer M H, Baars E W, Hoekman J, Ruijssenaars A J J M (2018) <a href="https://www.researchgate.net/publication/330164731_An_Instrument_for_Dimensional_Diagnosis_of_a_Child_Constitution_ICC_Individualizing_the_Care_for_Children_with_Developmental_Disorders" target="_blank">An instrument for dimensional diagnosis of a child’s constitution (ICC)</a>. International Journal of Complementary & Alternative Medicine, Issue 2-2018.</p>
<p>Niemeijer M H, Baars E W, Hoekman J, and Ruijssenaars A J J M (2018). <a href="https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fjournal.julypress.com%2Findex.php%2Fijsn%2Farticle%2Fdownload%2F531%2F401&data=04%7C01%7Cbaars.e%40hsleiden.nl%7C806fd3cb33754902a30908d92b842ba7%7C850f9344e078467e9c5e84d82f208ac7%7C1%7C0%7C637588668989923315%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=RinbscVUm36ksES%2F4dpv3pCSyMP6bzjQFJ8WPTt0yBM%3D&reserved=0" target="_blank">Validity and Reliability of the Instrument for Assessing the Child’s Constitution (ICC): Individualising Processes in Diagnosing Children With a Developmental Disorder</a> . International Journal of Studies in Nursing, 3(3), 172.</p>
<div class='noresults'>no results</div>
<h4 class="sub-heading-alt-resources" id="infectious">Infectious and chronic diseases</h4>
<p>Hamre H J. Witt C M, Glockmann A, Ziegler R (July 2007) <a href="https://www.researchgate.net/publication/6158737_Anthroposophic_Art_Therapy_in_Chronic_Disease_A_Four-Year_Prospective_Cohort_Study" target="_blank">Anthroposophic Art Therapy in Chronic Disease: A Four-Year Prospective Cohort Study</a> The Journal of Science and Healing 3(4):365-71, Doi: 10.1016/j.explore.2007.04.008,</p>
<p>Hamre H J et al. (2004). <a href="https://www.researchgate.net/publication/8374153_Anthroposophic_therapies_in_chronic_disease_The_Anthroposophic_Medicine_Outcomes_Study_AMOS" target="_blank">Anthroposophic therapies in chronic disease: The Anthroposophic Medicine Outcomes Study (AMOS)</a>. European Journal of Medical Research 2004; 9:351-360</p>
<p>Hamre H J et al. (2007) <a href="https://www.researchgate.net/publication/6158737_Anthroposophic_Art_Therapy_in_Chronic_Disease_A_Four-Year_Prospective_Cohort_Study" target="_blank">Anthroposophic Art Therapy in Chronic Disease: a four-year prospective cohort study</a>. Explore (NY). 2007 Nov-Dec;3(6):553</p>
<p>Hamre HJ et al. (2013). <a href="https://www.researchgate.net/publication/249318203_Long-term_outcomes_of_anthroposophic_treatment_for_chronic_disease_A_four-year_follow-up_analysis_of_1510_patients_from_a_prospective_observational_study_in_routine_outpatient_settings" target="_blank">Long-term Outcomes of Anthroposophic Treatment for Chronic Disease: A four-year follow-up Analysis of 1510 Patients from a Prospective Observational Study in routine outpatient settings</a> BMC Research Notes. 2013;6(1):269. DOI: <a href="https://doi.org/10.1186/1756-0500-6-269" target="_blank">https://doi.org/10.1186/1756-0500-6-269</a></p>
<div class='noresults'>no results</div>
<h4 class="sub-heading-alt-resources" id="covid">COVID-19</h4>
<p>Martin D, Soldner G (2020) <a href="https://www.anthromedics.org/PRA-0971-EN" target="_blank">A synthesis review of current status and proposal of a registry study to overcome social polarization tendencies and answer open research questions</a></p>
<p>Soldner G, Breitkreuz T (2020) <a href="https://www.anthromedics.org/PRA-0939-EN" target="_blank">COVID-19</a> </p>
<div class='noresults'>no results</div>
</div>
</div>
</section>

<!-- end snippet -->

The tricks in this code

• There're alot of <p> tags between <h4> and noresults .. So to select the matched h4 you'll need to use prevUntil With prev .. And the trick part is to select the next noresults so you'll need to start from the matched h4 not from the matched p.. this is why I'm using $('#research h4').not(filter_p.prevUntil('h4').prev('h4'))

Additional:

• If you want to hide the noresults when if any matched You can still use if(filter_p.length > 0){ // code to show the matched }else{ // show no results }