Question 108340 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

jQuery Page Search Filter – Exclude h4 headings from search results

Following on from a previous question which was solved here:

jQuery Page Search Filter – select paragraph text and ahref links

This above solution works perfectly, however, I now want to exclude the h4 headings from the search results. As can be seen in the Fiddle below, if any search term is inputted, the h4 heading (‘Research’) is always shown in the results:

https://jsfiddle.net/mfen723/zg6ej2w4/4/

The page I’m creating has many h4 headings, so I need to filter them out. The filter function I’m currently using is:

$(document).ready(function () {
    $("#searchInput").on("keyup", function () {
      var value = $(this).val().toLowerCase();
      $("#research > p").filter(function () {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });
  });

Any help much appreciated.

Tags:

2

Answers


  1. 0

    You need to return the filtered item, jquery filter

    .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;
}
    <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>
  </div>
</section>

<script>
  $(document).ready(function() {
    $("#searchInput").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $("#research > p").filter(function() {
        return $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });
  });

</script>
    Login or Signup to reply.
  2. 0

    $("#research > p").filter processes only <p> elements, consider using $("#research > *").each instead.

    You do not actually filter anything, since your function does not return anything, nor do you look at what the .filter function returns. Therefore .each is more appropriate.

    $(document).ready(function() {
  $("#searchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#research > *").each(function() {
      $(this).toggle(
        !$(this).is("h4") &&
        $(this).text().toLowerCase().indexOf(value) > -1
      );
    });
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="searchInput"/>
<div id="research">
  <h4>Research</h4>
  <p>A piece of research</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search