jQuery 按类别搜索列表

Question

我正在尝试编写一个 jQuery 函数，该函数将搜索页面上包含多个类的 url 的列表。我希望该函数使用输入到搜索框中的单词来匹配包含与输入内容匹配的类的列表项，并仅显示这些列表项。

这是我的 HTML：

<div class="internships">
<input class="search" placeholder="Search" type="text" />
<button class="sort button">Search</button>
</div>

<div class="internships">
 <ul class="descriptions">
  <li><a class="item biology bioinformatics pre dentistry medicine nursing pharmacy" href="/apply/internship-manager/school-of-dentistry/oral-pathology-medicine-and-radiology">Oral Pathology and Medicine &amp; Radiology</a></li>
  <li><a class="item biology biomedical engineering biotechnology chemistry neuroscience biochemistry" href="/apply/internship-manager/school-of-dentistry/dentistry-medicine-angela-bruzzaniti">Biomedical and Applied Sciences</a></li>
  <li><a class="item biology health sciences pre medicine dentistry" href="/apply/internship-manager/school-of-dentistry/dentistry-rachel-menegaz">Biomedical and Applied Sciences</a></li>
  <li><a class="item biology biotechnology chemistry health sciences pre dentistry medicine nursing pharmacy" href="/apply/internship-manager/school-of-dentistry/dentistry-richard-gregory">Biomedical and Applied Sciences</a></li>
 </ul>
</div>

*注意：这只是一个部分，页面上还有一些列表，但由于我工作的大学使用的框架，它们必须分成几个部分。

这是我的 jQuery：

$('.sort').click(function() {

    $('.search').keyup( function() {
        //Declare what is typed in the search box as a variable to use
       var value = this.value;
       $("#dom_element").text(value);
       //if the items with class .item contain the class that matches what is typed into the search box, show them, else hide them.
       if( $('.item').hasClass) {
           ('value').show();
       }
       else {
           $('.item').hide();

       }

    });

});

因此，如果用户在搜索框中键入护理，我希望只显示类中带有护理锚标记的列表项。我已经尝试了几种不同的方法（list.js 就是其中之一），但我找不到任何能够按类排序的方法。如果我需要澄清任何事情，请告诉我，我们将不胜感激。谢谢！

Answer 1

我会在这里推荐几个一般性的改进，然后回答你的问题。

首先，您应该将搜索框放在表单中。这为您提供了更多具有前瞻性的能力，例如，如果有人没有启用 JS，您可以让他们实际提交表单框并在结果显示时对结果进行排序（使用例如 PHP）。此外，您可以通过这种方式更自然地使用 URL，并让访问者使用 example.com?search=biology 之类的东西，例如书签搜索。

我还将您的类名放在li 元素上，而不是a 元素上。这更适合样式需求和一般组织 - 如果您以任何方式对 li 元素进行 CSS 样式并且只隐藏内部 a，li 可能仍然可见。

如果您必须在 a 元素上有类，请在下面的代码中将 $(this).hasClass(val) 与 $(this).find('a').hasClass(val) 交换。

关于您的实际问题。

hasClass 接受一个参数来检查，你似乎没有发送任何东西，所以它不会找到你正在寻找的那些。修复：

if ( $('.item').hasClass(value) ) {

点击、keyup 设置可能只是简单的 keyup，但我建议（再次）将搜索设为实际表单，然后在表单提交时运行搜索功能。因此：

<form class="search-form" action="" method="get">
  <input name="search" type="text" />
</form>

$('.search-form').submit( function(e) {
  // Do search/ filter
});

现在齐心协力：

<form class="search-form" action="" method="post">
  <input class="search" placeholder="Search" type="text" />
  <button class="sort button">Search</button>
</form>

<div class="internships">
  <ul class="descriptions">
    <li class="item biology bioinformatics pre dentistry medicine nursing pharmacy">
      <a href="/apply/internship-manager/school-of-dentistry/oral-pathology-medicine-and-radiology">Oral Pathology and Medicine &amp; Radiology</a>
    </li>
    <li class="item biology biomedical engineering biotechnology chemistry neuroscience biochemistry">
      <a href="/apply/internship-manager/school-of-dentistry/dentistry-medicine-angela-bruzzaniti">Biomedical and Applied Sciences</a>
    </li>
    <li class="item biology health sciences pre medicine dentistry">
      <a href="/apply/internship-manager/school-of-dentistry/dentistry-rachel-menegaz">Biomedical and Applied Sciences</a>
    </li>
    <li class="item biology biotechnology chemistry health sciences pre dentistry medicine nursing pharmacy">
      <a href="/apply/internship-manager/school-of-dentistry/dentistry-richard-gregory">Biomedical and Applied Sciences</a>
    </li>
  </ul>
</div>


$('.search-form').submit( function(e) {
  e.preventDefault();

  var val = $("input.search").val(),
      elems = $(".descriptions li");

  $.each(elems, function() {

    if ( $(this).hasClass(val) )
      $(this).show();
    else
      $(this).hide();
  });

});

https://jsfiddle.net/daCrosby/0xnfyanL/

Answer 2

您的 jquery 有点时髦，在 click 事件中有一个关键事件。我建议删除keyup，然后根据搜索值过滤li，如下所示

$('.sort').click(function() {
  var classes=$('.search').val().split(' ');
  $('.item').show();
  $('.item:not(.'+classes.join('.')+')').hide();
});

fiddle