Javascript關鍵字搜索Div值

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/）