將 HTML <a>href 屬性添加到 Javascript 不起作用</a>

Question

我正在嘗試使用 Javascript 為我的 Django 項目實施實時搜索，我按單詞搜索是有效的，但我只能作為結果獲得標題。 我正在嘗試添加 Href，以便它可以將標題指向 url。

這是我嘗試過的：

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)

    def get_absolute_url(self):
        return reverse("store:product-detail", kwargs={'slug': self.slug})

這是views.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

這里是模板。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-->

這是JS

<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)
        
        var url = "{{item.get_absolute_url}}"; 
        
        if (filteredArr.length > 0){
            filteredArr.map(store=>{
                box.innerHTML += `<a href="url"><br>${store['title']}<br></a>`
            })
        } else {
            box.innerHTML = "<b>No results found...</b>"
        }
    })
</script>

我目前收到一個錯誤：

Page not found (404)
Request Method: GET
Request URL:    http://127.0.0.1:8000/url

我的問題：如何使用 JS 添加指向{{item.get_absolute_url}}的鏈接

Answer 1

當前代碼：

box.innerHTML += `<a href="url"><br>${store['title']}<br></a>`

鏈接到字符串文字“url”。

由於var url包含您要鏈接到的 URL，因此此更改將創建<a>鏈接，其 href 設置為url的值

box.innerHTML += `<a href="${url}"><br>${store['title']}<br></a>`