javascript search function

検索機能付きの表を作成しました。そのため、商品名を入力するとこの商品のみが表示され、他の項目はすべて非表示になります。しかし、私はブートストラップのサムネイルスタイルのすべての製品（テーブル、tr、tdを使わずに）がある別のページを持っていますが、ここでもこの検索機能を試みましたが、動作しません。私はJavascript/Jqueryで完全に初心者です。誰でも助けてくれますか？javascript search function

<div class="col-md-12"> 
     <input type="text" id="myInput" onkeyup="myProdFunction()" placeholder="Keresés.."> 
    </div> 

    <div class="osszterm" id="prodsearch"> 
    @foreach($products as $product) 

     <div class="col-sm-4 col-md-2" id="prodid"> 
      <div class="thumbnail"> 
       <img src="/avatars/{{ $product->avatar }}" alt=""> 
        <div class="caption"> 
         <a href="#"><h3 id="prodname">{{ $product->ptitle }}</h3></a> 
         <p>{{ $product->par }} Ft</p> 
         <p>{{ $product->pdb }} db</p> 
        </div> 
      </div> 
     </div> 
    @endforeach 
    </div>

Javascriptを：：

function myProdFunction() { 
// Declare variables 
var input, filter, table, tr, td, i; 
input = document.getElementById("myInput"); 
filter = input.value.toUpperCase(); 
table = document.getElementById("prodsearch"); 
tr = table.getElementById("prodid").getElementByClassName("thumbnail"); 

for (i = 0; i < tr.length; i++) { 
td = tr[i].getElementsById("prodname")[1]; 


if (td) { 
    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
    tr[i].style.display = ""; 
    } else { 
    tr[i].style.display = "none"; 
    } 
} 
} 
}

出典

2017-07-17 Dodo

ここでは、jQueryので書かれたサンプル検索コードです。これを確実にするために、いくつかのクラスを追加する必要があります。

$("#myInput").on('keyup', function() { 
 
    $(".parentClass").hide(); 
 
    var enteredVal = $(this).val(); 
 
    enteredVal = enteredVal.toUpperCase(); 
 
    $(".prodname").each(function() { 
 
    var prodName = $(this).text(); 
 
    prodName = prodName.toUpperCase(); 
 
    if (prodName.indexOf(enteredVal) > -1) { 
 
     $(this).parents(".parentClass").show(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-12"> 
 
    <input type="text" id="myInput" placeholder="Keresés.."> 
 
</div> 
 

 
<div class="osszterm" id="prodsearch"> 
 

 
    <div class="col-sm-4 col-md-2 parentClass" id="prodid"> 
 
    <div class="thumbnail"> 
 
     <img src="/avatars/{{ $product->avatar }}" alt=""> 
 
     <div class="caption"> 
 
     <a href="#"> 
 
      <h3 class="prodname"> Apple</h3> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4 col-md-2 parentClass" id="prodid"> 
 
    <div class="thumbnail"> 
 
     <img src="/avatars/{{ $product->avatar }}" alt=""> 
 
     <div class="caption"> 
 
     <a href="#"> 
 
      <h3 class="prodname"> Banana</h3> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4 col-md-2 parentClass" id="prodid"> 
 
    <div class="thumbnail"> 
 
     <img src="/avatars/{{ $product->avatar }}" alt=""> 
 
     <div class="caption"> 
 
     <a href="#"> 
 
      <h3 class="prodname"> Mango</h3> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

：各親divが 'parentClass' という名前のクラスを持っている必要があります

出典

2017-07-17 11:07:45