使用Javascript实现实时Django搜索

2024-03-29 02:20:20 发布

您现在位置:Python中文网/ 问答频道 /正文

我正在使用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(/&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>

这是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>

Tags: storedivboxurlinputdatagettitle
3条回答
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))

试试这个

我认为您可以通过以下代码更改脚本


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 += `
            <div class="col-4 mb-3">
                <div class="card h-100">
                    <a href="${store['get_absolute_url']}">
                        <embed src="${store['image']['url']}" class="card-img-top" alt="..."/>
                    </a>
                    <div class="card-body">
                        <h5 class="card-title">${store['title']}</h5>
                        <p class="card-text">
                            ${store['description'] ?? ''}
                        </p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">${store['timestamp']}</small>
                    </div>
                </div>
            </div>`;
        })
    } else {
        box.innerHTML = "<b>No results found...</b>"
    }
})

您的template.html页面已经使用for-loop生成了所有HTML,因此您不需要再次生成它们。相反,当用户键入时,您可以遍历所有div并检查card-titlediv是否具有该input,如果它只是显示该div,或者隐藏该div

演示代码

&13; 第13部分,;
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
    }
  })
})
.outers {
  border: 1px solid blue;
  width: 150px;
  height: 150px;
  margin-bottom: 5px
}
<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>
和#13;
和#13;

相关问题 更多 >