<p>您的<code>template.html</code>页面已经使用<code>for-loop</code>生成了所有HTML,因此您不需要再次生成它们。相反,当用户键入时,您可以遍历所有div并检查<code>card-title</code>div是否具有该<code>input</code>,如果它只是显示该div,或者隐藏该div</p>
<p>演示代码
</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">&13;
第13部分,;
<pre class="snippet-code-js lang-js prettyprint-override"><code>const input = document.getElementById('search_here')
input.addEventListener('keyup', (e) => {
var inputs = e.target.value.toLowerCase(); //do lowercase
//loop through outer div and hide it
document.querySelectorAll('.outers').forEach(function(el) {
el.style.display = 'none';
});
//loop through outer ->card-title
document.querySelectorAll('.outers .card-title').forEach(function(el) {
//compare
if (el.textContent.toLowerCase().indexOf(inputs) > -1) {
el.closest('.outers').style.display = "block"; //if match show that div
}
})
})</code></pre>
;
<pre class="snippet-code-css lang-css prettyprint-override"><code>.outers {
border: 1px solid blue;
width: 150px;
height: 150px;
margin-bottom: 5px
}</code></pre>
;
<pre class="snippet-code-html lang-html prettyprint-override"><code><input id="search_here" class="mb-2 form-control" placeholder="Type to search...">
<div id="box" class='row card-group'>
<! just added one extra class >
<div class="col-4 mb-3 outers">
<div class="card h-100">
<a href="{{item.get_absolute_url}}">
<img src="{{ item.image.url }}" class="card-img-top" alt="..." />
</a>
<div class="card-body">
<h5 class="card-title">Somethings</h5>
<p class="card-text">
some things ...
</p>
</div>
<div class="card-footer">
<small class="text-muted">12:30:00</small>
</div>
</div>
</div>
<div class="col-4 mb-3 outers">
<div class="card h-100">
<a href="{{item.get_absolute_url}}">
<img src="{{ item.image.url }}" class="card-img-top" alt="..." />
</a>
<div class="card-body">
<h5 class="card-title">Abc</h5>
<p class="card-text">
some things ...
</p>
</div>
<div class="card-footer">
<small class="text-muted">12:30:00</small>
</div>
</div>
</div>
<div class="col-4 mb-3 outers">
<div class="card h-100">
<a href="{{item.get_absolute_url}}">
<img src="{{ item.image.url }}" class="card-img-top" alt="..." />
</a>
<div class="card-body">
<h5 class="card-title">def</h5>
<p class="card-text">
some things ...
</p>
</div>
<div class="card-footer">
<small class="text-muted">12:30:00</small>
</div>
</div>
</div>
</div></code></pre>
;
</div>和#13;
</div>和#13;