Javascript Keyup Suche nach Div-Werten

Question

Ich habe eine Liste von Aufgaben, für die ich eine Suchfunktion erstellen möchte. Ich habe es geschafft, dass sobald Sie anfangen zu tippen, die Liste reagiert und alle falschen Ergebnisse verbirgt. Allerdings kann ich immer noch nicht das korrekte Ergebnis anzeigen.

Ich möchte um die Suche machen, basierend auf Unternehmen Name und CEO Name nur

Codes sind unter

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() 
    } 
}) 

Das ist mein jsfiddle

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

Könnten Sie bitte lassen Sie mich wissen, wie dies zu tun ??

Answer 1

Wie wäre es

$(".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/)