Javascript Keyup Div値を検索する

Question

検索機能を作成するタスクのリストがあります。私はそれを持っているので、入力を開始すると、リストは応答し、すべての不正な結果を隠すようにしました。しかし、私はまだ正しい結果を示すことができません。

<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

：私だけ

コード会社名に基づいて検索し、CEO名前を作りたい

は

HTMLを下回っています

$("#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() } }) 

これは私がこれを行う方法を教えてくださいでし

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

私jsfiddleあります？

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