Question

我正在尝试使用Jquery在网页上实现搜索框。但搜索没有按预期工作。当用户在搜索框中输入内容时。它应该搜索项目名称，如无线电用户，访问控制列表等。

也可以帮助我在整个网页上实现类似的搜索。任何帮助将不胜感激。谢谢

Html：

<div id="form_search">
<form class="searchFaq" action="#">
<input class="filterinput1" placeholder="Search for Catalog Items" type="text">
</form>
</div>

<div id="allItems" class="col-sm-3">
<a style="text-decoration: none; display: inline-block;" href="catalog.do?sysparm_id=36c0754109715940963780fde6ca6e78&sysparm_table=sc_cat_item">
<div class="panel panel-default" style="height: 275px; width: 275px; display: block;">
<div class="panel-heading" style="height: 90px; display: block;">
<div class="span_item" style="color: rgb(66, 139, 202); display: block;">Radio Subscriber</div>
</div>
<div class="panel-body" style="display: block;">
</div>
</a>
</div>

<div id="allItems" class="col-sm-3">
<a style="text-decoration: none" href="catalog.do?sysparm_id=193ca5f809791940963780fde6ca6e6e&sysparm_table=sc_cat_item">
<div class="panel panel-default" style="height:275px;width:275px">
<div class="panel-heading" style="height:90px">
<div class="span_item" style="color:#428bca">Access Control List</div>
</div>
<div class="panel-body">
</div>
</a>
</div>

脚本：

<script type="text/javascript">
(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };

  //live search function
  function live_search(list) {
    $(".filterinput1")
      .change( function () {
        //getting search value
        var searchtext = $(this).val();
        if(searchtext) {
          //finding If content matches with searck keyword
          $matches = $(list).find('div:Contains(' + searchtext + ')').parent();
          //hiding non matching lists
          $('div', list).not($matches).slideUp();
          //showing matching lists
          $matches.slideDown();

        } else {
          //if search keyword is empty then display all the lists
          $(list).find("div").slideDown(200);
        }
        return false;
      })
    .keyup( function () {
        $(this).change();
    });
  }

  $(function () {
    live_search($("#allItems"));
  });
}(jQuery));
</script>

Answer 1

不确定这是否对您有所帮助，但我开发了一个jQuery插件，可以在加载的数据中执行搜索操作。

开发人员提供了一个数据源（具有预定属性的对象数组），这些数据源在树结构中组织（与父子相关）。该插件提供了对加载数据进行seacrh并选择部分或全部数据的功能。

有关详细信息，请查看README文件。

此处还有一个DEMO页面，您可以在其中查看插件的功能。

Answer 2

您的不区分大小写的搜索本身效果很好。将其应用于搜索候选列表时，会出现此问题。您只选择第一个父级别作为div保持可见。这样他们的父母和最初选择的div就变得隐形了。这显然不是你想要的。

更改行

时

$matches = $(list).find('div:Contains(' + searchtext + ')').parent();

到

$matches = $(list).find('div:Contains(' + searchtext + ')').parents().addBack();

您的搜索框应按预期工作。 parents()将选择所有＆＃34;代的父母＆＃34; （级别）和addBack()会将实际div本身添加回选择，因此整个链将位于您的jquery集合$matches中。

Jquery搜索框实现

2 个答案: