Question

我有一个我想为其创建搜索功能的任务列表。我已经设法让它一旦你开始输入，列表响应并隐藏所有不正确的结果。但是我仍然无法显示正确的结果。

我想根据公司名称和 CEO 名称进行搜索

代码在下面

HTML：

<div class="sortable col-lg-12" id="pacstable">
   <div class="portlet portlet-sortable light bordered pack-panel" data-id="19"  data-compname="TCS" data-ceo="Chandrasekaran" data-createddate="Oct 6 2009" style="display: block;">
      <div class="portlet-title">
         <div class="row">
            <div class="col-md-7">
               <div class="packdtsl">
                  <div class="packimg"></div>
                  <ul>
                     <li>
                        <span class="title">Company Name:</span> 
                        <span>
                           <h1 class="packname">TCS</h1>
                        </span>
                     </li>
                     <li><span class="title">CEO:</span> <span>Chandrasekaran</span></li>
                     <li><span class="title">Created On:</span> <span>Oct 6 2009</span></li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="portlet portlet-sortable light bordered pack-panel" data-id="20"  data-compname="INFosys" data-ceo="NaryanaMurty" data-createddate="Aug 1 2014" style="display: block;">
      <div class="portlet-title">
         <div class="row">
            <div class="col-md-7">
               <div class="packdtsl">
                  <div class="packimg"></div>
                  <ul>
                     <li>
                        <span class="title">Company Name:</span> 
                        <span>
                           <h1 class="packname">INFosys</h1>
                        </span>
                     </li>
                     <li><span class="title">CEO:</span> <span>NaryanaMurty</span></li>
                     <li><span class="title">Created On:</span> <span>Oct 6 2009</span></li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

<input type="text" id="searchinputtext" class="form-control" placeholder="Search by Comp name, CEO Name">

JS

$("#searchinputtext").keyup(function() {
  var val = $.trim(this.value).toUpperCase();

  if (val === '')
    $(".pack-panel").show();
  else {
    $(".pack-panel").hide()
    result = $("#pacstable .pack-panel").filter(function() { //Updated to match child of id todo
      return -1 != $(this).text().toUpperCase().indexOf(val)
    }).index()

        result != -1 ? $(".pack-panel").eq(result).show() : $(".pack-panel").hide()
  }
})

这是我的jsfiddle

https://jsfiddle.net/7sfr49px/7/

你能告诉我怎么做吗??

Answer 1

怎么样

$(".pack-panel").each(function () {
    var searchData = [
        $.trim( $(this).find("span:contains('Company Name:')").next("span").text() ),
        $.trim( $(this).find("span:contains('CEO:')").next("span").text() )
    ];
    $(this).data("search", searchData.join(" ").toUpperCase());
});

$("#searchinputtext").keyup(function() {
  var val = $.trim(this.value).toUpperCase();

  $(".pack-panel").each(function () {
    var visible = !val || $(this).data("search").indexOf(val) > -1;
    $(this).toggle(visible);
  });
});

（https://jsfiddle.net/7sfr49px/8/）

Javascript Keyup搜索Div值

1 个答案: