从另一篇文章开始，在这里：jQuery 搜索页面过滤器 - 添加条件，当找不到匹配的内容时显示“不匹配”
下面的函数显示搜索页面时页面上的所有h4标题。内容与搜索词匹配的 h4s 在标题下方显示匹配结果，没有匹配内容的 h4s 在标题下方显示“无结果”。
在这里小提琴：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
);
});
});
});
我希望该函数仅显示匹配的 h4 标题（以及 p 标签中的匹配内容），并仅在没有搜索结果时显示“无结果”，而不是在搜索页面时显示所有 h4 标题页面上的匹配项。
非常感谢任何帮助。
$(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
);
});
});
});.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;
}<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>