Python中文
首页
教程
问答
标签
搜索
登录
注册
使用Javascript实现实时Django搜索
回答此问题可获得
20
贡献值,回答如果被采纳可获得
50
分。
<p>我正在使用Javascript向我的电子商务项目添加搜索功能,我遵循了一个教程,该教程解释了在搜索栏中写入标题时,只会显示具有相同字母的项目。在我的项目中,对于基本HTML来说,它工作得很好,但我正试图让它变得更复杂一些,包括一张完整的卡片,上面有一些细节,比如价格,而不仅仅是标题</p> <p><em>这是模型。py</em></p> <pre><code>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) </code></pre> <p>这是视图。py</em></p> <pre><code>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 </code></pre> <p><em>这里是scripts.py</em></p> <pre><code><script> const data = '{{qs_json}}' const rdata = JSON.parse(data.replace(/&quot;/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> </code></pre> <p><em>这是template.html</em></p> <pre><code><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--> </code></pre> <p><strong>我的问题:</strong>如何将脚本中的简单<code><b>${store['title']}</b><br></code>替换为整个card div及其所有相关信息</p> <p>如果需要更多信息或澄清,请告诉我</p> <pre><code> <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> </code></pre>
0 条评论
分类:
Python问答
请先
登录
后评论
默认排序
时间排序
1 个回答
匿名
1天前
擅长:python、mysql、java
<pre><code>from django.db.models import Q name = request.POST['name'] price = request.POST['price'] Item.objects.filter(Q(title __icontains=name) | Q(price __icontains=price)) </code></pre> <p>试试这个</p>
请先
登录
后评论
针对此问题:
更多的回答
关注
89
关注
收藏
1
收藏,
216
浏览
网友 提问于 2天前
相关Python问题
将Pandas数据帧转换为PyTorch张量?
1 回答
将Pandas数据帧转换为scipy稀疏矩阵
10 回答
将Pandas数据帧转换为Spark Datafram时出现问题
7 回答
将pandas数据帧转换为spark DataFram时出错
7 回答
将Pandas数据帧转换为spark datafram时收到错误
2 回答
将Pandas数据帧转换为Spark数据帧
3 回答
将Pandas数据帧转换为Tensorflow数据
8 回答
将Pandas数据帧转换为tkinter obj
3 回答
将pandas数据帧转换为XML
6 回答
将Pandas数据帧转换为值sql语句
4 回答
将pandas数据帧转换为元组
7 回答
将pandas数据帧转换为元组列表
7 回答
将pandas数据帧转换为元组列表并删除所有pandas数据类型
5 回答
将pandas数据帧转换为具有头和数据类型的numpy数组
1 回答
将pandas数据帧转换为内存中的拼花地板,并将其加载到Python中的Hadoop中
4 回答
将pandas数据帧转换为内存中类似文件的对象?
10 回答
将Pandas数据帧转换为内存功能(&F)
2 回答
将pandas数据帧转换为列表列表
6 回答
将pandas数据帧转换为列表列表以输入到RNN
2 回答
将Pandas数据帧转换为单行DataFram
1 回答