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

你的jquery在点击事件中有一个关键事件有点时髦。我建议删除keyup，只根据搜索值过滤li

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

fiddle

Answer 2

我建议在这里进行一些改进，然后回答你的问题。

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

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

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

根据您的实际问题。

if ( $('.item').hasClass(value) ) {接受要检查的参数，您似乎无法发送任何内容，因此无法找到您正在寻找的参数。修复：

<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();
  });

});

现在一起：

 nav.leftBarButtonItem?.customView?.hidden = true

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

按类分类的jQuery搜索列表

2 个答案: