我正在使用Javascript向我的电子商务项目添加搜索功能,我遵循了一个教程,该教程解释了在搜索栏中写入标题时,只会显示具有相同字母的项目。在我的项目中,对于基本HTML来说,它工作得很好,但我正试图让它变得更复杂一些,包括一张完整的卡片,上面有一些细节,比如价格,而不仅仅是标题
这是模型。py
class Item(models.Model):
title = models.CharField(max_length=100)
image = models.ImageField(blank=False, upload_to=upload_design_to)
price = models.DecimalField(decimal_places=2, max_digits=100)
discount_price = models.DecimalField(decimal_places=2, max_digits=100, blank=True, null=True)
timestamp = models.DateTimeField(default=timezone.now)
这是视图。py
class ItemListView(ListView):
model = Item
paginate_by = 12
template_name = "store/product_list.html"
ordering = ['-timestamp']
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context["qs_json"] = json.dumps(list(Item.objects.values()),cls=DjangoJSONEncoder)
return context
这里是scripts.py
<script>
const data = '{{qs_json}}'
const rdata = JSON.parse(data.replace(/"/g, '"'))
console.log(rdata)
const input = document.getElementById('search_here')
console.log(input)
let filteredArr = []
input.addEventListener('keyup', (e)=>{
box.innerHTML = ""
filteredArr = rdata.filter(store=> store['title'].includes(e.target.value))
console.log(filteredArr)
if (filteredArr.length > 0){
filteredArr.map(store=>{
box.innerHTML += `<b>${store['title']}</b><br>`
})
} else {
box.innerHTML = "<b>No results found...</b>"
}
})
</script>
这是template.html
<input id="search_here" class="mb-2 form-control" placeholder="Type to search...">
<!--Card-->
<div id="box" class='row card-group'>
{% for item in object_list %}
<div class="col-4 mb-3">
<div class="card h-100">
<a href="{{item.get_absolute_url}}">
<embed src="{{ item.image.url }}" class="card-img-top" alt="..."/>
</a>
<div class="card-body">
<h5 class="card-title">{{ item.title }}</h5>
<p class="card-text">
{% if item.description %}
{{ item.description }}
{% endif %}
</p>
</div>
<div class="card-footer">
<small class="text-muted">{{ item.timestamp }}</small>
</div>
</div>
</div>
{% endfor %}
</div>
<!--Card-->
我的问题:如何将脚本中的简单<b>${store['title']}</b><br>
替换为整个card div及其所有相关信息
如果需要更多信息或澄清,请告诉我
<div class="col-4 mb-3">
<div class="card h-100">
<a href="{{item.get_absolute_url}}">
<embed src="{{ item.image.url }}" class="card-img-top" alt="..."/>
</a>
<div class="card-body">
<h5 class="card-title">{{ item.title }}</h5>
<p class="card-text">
{% if item.description %}
{{ item.description }}
{% endif %}
</p>
</div>
<div class="card-footer">
<small class="text-muted">{{ item.timestamp }}</small>
</div>
</div>
</div>
试试这个
我认为您可以通过以下代码更改脚本
您的
template.html
页面已经使用for-loop
生成了所有HTML,因此您不需要再次生成它们。相反,当用户键入时,您可以遍历所有div并检查card-title
div是否具有该input
,如果它只是显示该div,或者隐藏该div演示代码