Javascript Keyup搜索Div值 [英] Javascript Keyup Search for Div Values

问题描述

我有一个要为其创建搜索功能的任务列表.我设法做到这一点，以便您一开始输入，列表就会响应并隐藏所有不正确的结果.但是，我仍然无法显示正确的结果.

I have a list of tasks that I would like to create a search function for. I have managed to have it so that as soon as you start typing, the list responds and hides all incorrect results. However I am still unable to show the correct result.

我要仅根据公司姓名和 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

This is my jsfiddle

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

能否让我知道该怎么做?

Could you please let me know how to do this ??

推荐答案

如何

$(".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值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！