Wednesday 6 January 2021

Using Javascript to implement Live Django Search

I am adding a Search functionality to my E-commerce Project using Javascript, I have followed a tutorial that explains that when writing the title in the search bar only the items with the same letter appears. In my project, it was working fine for basic HTML but I am trying to make it a little more complex to include a complete card with some details such as price, not just the title.

Here is the model.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)

Here is the 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

Here is the scripts.py

<script>
    const data = ''

    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>

Here is the template.html

<input id="search_here" class="mb-2 form-control" placeholder="Type to search...">

<!--Card-->
<div id="box" class='row card-group'>

</div>
<!--Card-->

My Question: How do I replace the simple <b>${store['title']}</b><br> with the below in the scripts with the whole card div with all its information related to it?

If any more information or clarifications required let me know

  <div class="col-4 mb-3">
    <div class="card h-100">
        <a href="">
      <embed src="" class="card-img-top" alt="..."/>
        </a>
      <div class="card-body">
        <h5 class="card-title"></h5>
          <p class="card-text">
        
        </p>
      </div>
      <div class="card-footer">
        <small class="text-muted"></small>
      </div>
    </div>
  </div>


from Using Javascript to implement Live Django Search

No comments:

Post a Comment