jQuery поиск / фильтрация списка

Question

Я создаю поиск с использованием jQuery для фильтрации списков вакансий на странице по заголовкам.

Вот мой jQuery

function quickSearch() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("quicksearch");
    filter = input.value.toUpperCase();
    ul = document.getElementById("jobResults");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("h2")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

Вот мое поле поиска

<input type="text" id="quicksearch" onkeyup="quickSearch()" placeholder="Search jobs from Reed, Skills People Group & Glenigan" title="Search jobs from Reed, Skills People Group & Glenigan">

вот список работ, которые я пытаюсь найти и отфильтровать

<ul class="kamkaaj-row sort-list grid" id="jobResults" style="position: relative; height: 15684px;">
    <li class="kamkaaj-column-12 sort-item Reed jobResult Sheffield" id="jobResult" style="position: absolute; left: 0px; top: 0px;">
        <div class="kamkaaj-tabwrap">
            <div class="kamkaaj-tabro">
                <div class="kamkaaj-tabce">
                    <figure>
                        <a href="https://www.reed.co.uk/jobs/technical-sales-engineer-construction-engineering/39044835" target="_blank"><img src="/themes/skills-academy/assets/images/reed-min.jpg" alt="Reed Jobs in Sheffield"></a>
                    </figure>
                </div>
                <div class="kamkaaj-tabce">
                    <div class="kamkaaj-job-listing-text">
                        <h2>
                        <a class="" data-toggle="collapse" href="#job39044835" role="button" aria-expanded="false" aria-controls="collapseExample">Technical Sales Engineer Construction / Engineering</a>
                                                        </h2>
                        <ul class="kamkaaj-job-listing-options">
                            <li>Sheffield</li>
                            <li>Full-time</li>
                            <li>£35000 - £35000 <small>Per Annum</small></li>
                        </ul>
                    </div>
                </div>
                <div class="kamkaaj-tabce">
                    <time datetime="2008-02-14 20:00" id="daysSince">
                    </time>
                    <ul class="kamkaaj-job-listing-savelist">
                        <li>
                            <a href="https://www.reed.co.uk/jobs/technical-sales-engineer-construction-engineering/39044835" class="kamkaaj-job-listing-savelist-btn" target="_blank">View</a>
                        </li>
                        <li>
                            <span class="kamkaaj-color">Reed</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
    <li class="kamkaaj-column-12 sort-item Reed jobResult Sheffield" id="jobResult" style="position: absolute; left: 0px; top: 154px;">
        <div class="kamkaaj-tabwrap">
            <div class="kamkaaj-tabro">
                <div class="kamkaaj-tabce">
                    <figure>
                        <a href="https://www.reed.co.uk/jobs/construction-solicitor/38973615" target="_blank"><img src="/themes/skills-academy/assets/images/reed-min.jpg" alt="Reed Jobs in Sheffield"></a>
                    </figure>
                </div>
                <div class="kamkaaj-tabce">
                    <div class="kamkaaj-job-listing-text">
                        <h2>
                         <a class="" data-toggle="collapse" href="#job38973615" role="button" aria-expanded="false" aria-controls="collapseExample">Construction Solicitor</a>
                        </h2>
                        <ul class="kamkaaj-job-listing-options">
                            <li>Sheffield</li>
                            <li>Full-time</li>
                        </ul>
                    </div>
                </div>
                <div class="kamkaaj-tabce">
                    <time datetime="2008-02-14 20:00" id="daysSince">
                    </time>
                    <ul class="kamkaaj-job-listing-savelist">
                        <li>
                            <a href="https://www.reed.co.uk/jobs/construction-solicitor/38973615" class="kamkaaj-job-listing-savelist-btn" target="_blank">View</a>
                        </li>
                        <li>
                            <span class="kamkaaj-color">Reed</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </li>

</ul>

По какой-то причине он не работает.

Я основал то, что я делаю, на версии W3Schoolsкоторая может быть найдена здесь: https://www.w3schools.com/howto/howto_js_filter_lists.asp

Моя версия, которая не работает, может быть найдена здесь: https://sheffieldskillsacademy.com/locations/sheffield/jobs

Любая помощь, чтобы исправить это, будет оценена.

Answer 1

Вам необходимо изменить код, чтобы выбрать только элементы поиска, используя querySelectorAll('li ul li')

function quickSearch(input) {
  var filter, ul, li, a, i, txtValue;
  filter = input.value.toUpperCase();
  ul = document.getElementById("jobResults");
  li = ul.querySelectorAll('li ul li');
  for (i = 0; i < li.length; i++) {
    txtValue = li[i].textContent || li[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

<input type="text" id="quicksearch" onkeyup="quickSearch(this)" placeholder="Search jobs from Reed, Skills People Group & Glenigan" title="Search jobs from Reed, Skills People Group & Glenigan">


<ul class="kamkaaj-row sort-list grid" id="jobResults" style="position: relative; height: 15684px;">
  <li class="kamkaaj-column-12 sort-item Reed jobResult Sheffield" id="jobResult" style="position: absolute; left: 0px; top: 0px;">
    <div class="kamkaaj-tabwrap">
      <div class="kamkaaj-tabro">
        <div class="kamkaaj-tabce">
          <figure>
            <a href="https://www.reed.co.uk/jobs/technical-sales-engineer-construction-engineering/39044835" target="_blank"><img src="/themes/skills-academy/assets/images/reed-min.jpg" alt="Reed Jobs in Sheffield"></a>
          </figure>
        </div>
        <div class="kamkaaj-tabce">
          <div class="kamkaaj-job-listing-text">
            <h2>
              <a class="" data-toggle="collapse" href="#job39044835" role="button" aria-expanded="false" aria-controls="collapseExample">Technical Sales Engineer Construction / Engineering</a>
            </h2>
            <ul class="kamkaaj-job-listing-options">
              <li>Sheffield</li>
              <li>Full-time</li>
              <li>£35000 - £35000 <small>Per Annum</small></li>
            </ul>
          </div>
        </div>
        <div class="kamkaaj-tabce">
          <time datetime="2008-02-14 20:00" id="daysSince">
                    </time>
          <ul class="kamkaaj-job-listing-savelist">
            <li>
              <a href="https://www.reed.co.uk/jobs/technical-sales-engineer-construction-engineering/39044835" class="kamkaaj-job-listing-savelist-btn" target="_blank">View</a>
            </li>
            <li>
              <span class="kamkaaj-color">Reed</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </li>
  <li class="kamkaaj-column-12 sort-item Reed jobResult Sheffield" id="jobResult" style="position: absolute; left: 0px; top: 154px;">
    <div class="kamkaaj-tabwrap">
      <div class="kamkaaj-tabro">
        <div class="kamkaaj-tabce">
          <figure>
            <a href="https://www.reed.co.uk/jobs/construction-solicitor/38973615" target="_blank"><img src="/themes/skills-academy/assets/images/reed-min.jpg" alt="Reed Jobs in Sheffield"></a>
          </figure>
        </div>
        <div class="kamkaaj-tabce">
          <div class="kamkaaj-job-listing-text">
            <h2>
              <a class="" data-toggle="collapse" href="#job38973615" role="button" aria-expanded="false" aria-controls="collapseExample">Construction Solicitor</a>
            </h2>
            <ul class="kamkaaj-job-listing-options">
              <li>Sheffield</li>
              <li>Full-time</li>
            </ul>
          </div>
        </div>
        <div class="kamkaaj-tabce">
          <time datetime="2008-02-14 20:00" id="daysSince">
                    </time>
          <ul class="kamkaaj-job-listing-savelist">
            <li>
              <a href="https://www.reed.co.uk/jobs/construction-solicitor/38973615" class="kamkaaj-job-listing-savelist-btn" target="_blank">View</a>
            </li>
            <li>
              <span class="kamkaaj-color">Reed</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </li>

</ul>

Answer 2

Я бы посоветовал взглянуть на встроенную в Javascript функцию Array.prototype.filter . Может пригодиться для этой проблемы.

Ошибки на вашем сайте показывают, что при выполнении этой строки

 txtValue = a.textContent || a.innerText;

a не определено. Массив, который вы перебираете, не содержит того, что вы ожидаете. У большинства ваших элементов li даже нет элемента h2, вот что вызывает некоторые ошибки. Вот где я начну искать, так как вы, возможно, неправильно поняли свою собственную структуру DOM.