javascript搜索功能

我创建了一个带搜索功能的表格，所以如果我在输入中编写产品标题，那么它将只显示该产品，其他所有项目都将被隐藏。但现在我有另一个页面，其中有所有带引导缩略图样式的产品（不使用table，tr和td），我也尝试在此处执行此搜索功能，但它不起作用。我完全是Javascript/Jquery的初学者。任何人都可以帮助我吗？这是网页：javascript搜索功能

<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的样品搜索码。你需要添加几个类，以确保这对你有用。每个父DIV应该有一流的名为 '父类'：

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

来源

2017-07-17 11:07:45

重写使用缩略图的div从引导功能。 jQuery中有足够的选择器来实现这个功能。您只需使用不同类型的div而不是td-Elements来过滤产品。

这里北京时间的doumentation用于与jQuery选择元素： jQuery Selectors

来源

2017-07-17 10:58:12 habamedia

javascript搜索功能

回答

相关问题