How can display products coming from ajax search result in django?

Question

Problem The search feature is working and the values are retrieved from the Django views search function but now I'm not getting how to display those values in my Django project.

Can anyone here can help me through this.

The code is attached below.

JS

 $('#searchsubmit').on('click', function(e){
        e.preventDefault();
        q = $('#search').val();
        console.log(q);
        updateContentBySearch(q);
  });

function updateContentBySearch(q) {
    var data = {};
    data['search_by'] = q
    // data["csrfmiddlewaretoken"] = $('#searchform [name="csrfmiddlewaretoken"]').val();
    $.ajax({
        url: "{% url 'main:Search' %}",
        data: {
          'search_by': q
        },
        success: function (data) {
            // do your thing
        }
      });

    }

VIEW

def search(request):
    q = request.GET.get('search_by')
    print(q)
    product = Products.objects.all()
    cart_product_form = CartAddProductForm()
    transaction = transactions.objects.filter(productID__name__icontains=q,status='Enable').order_by('productID')
    print(transaction)
    return HttpResponseRedirect(reverse('main:home'),{'products':product, 'transaction': transaction , 'cart_product_form':cart_product_form})
    # return redirect(request, 'main/home.html',{'products':product, 'transaction': transaction , 'cart_product_form':cart_product_form})

HTML FORM

form class="d-flex col-md-6" id="searchform">
   <div class="input-group mb-3" style="text-align:center">
  <input name="q" type="text" class="form-control" placeholder="Search" id="search">
  <button class="btn btn-primary shadow px-5 py-2" type="submit" id="searchsubmit">Search</button>
   </div>
</form>

HTML PRODUCT DISPLAY

 {% regroup transaction by productID as ProductList %}
  {% for productID in ProductList %}
  <div class="col-sm-3 productID" >
    <div class="product">
      <a href="{% url 'main:product-detail' productID.grouper.id %}" class="img-prod"><img class="img-fluid" src={{productID.grouper.product_image.url}} alt="" height="200px">
        <span class="status id_discount">%</span>
        <div class="overlay"></div>
      </a>
      <div class="text py-3 pb-4 px-3 text-center">
        <h3><a href="#">{{productID.grouper}}</a></h3>
        <div class="d-flex text-center">
          <div class="" style="width: 310px;">
            <p class="price"><span class="mr-2 price-dc id_price"> </span> Rs. <span class="price-sale"> </span></p>
          </div>
        </div>
          
         
         
        <!-- <div class="bottom-area d-flex px-3">
          <div class="m-auto d-flex"> -->
            <form id='transactionIDValue' class="d-inline" method="post">
              <div class="row">
                <select class="col-md-8 form-select tranactionID" id="ItemID" style="">
                  {% for val in productID.list %}
                      <option transID={{val.id}} price={{val.Price}} discount={{val.discount_percentage}} sale_price={{val.get_sale}} class="price_value" >{{val.AUID}} - {{val.Description}}</option>
                  {% endfor %}
                </select>
              <div class="col-md-4">
              {{cart_product_form.quantity}}
            </div>
              {% csrf_token %}
              <hr style="border-top: 1px solid #ccc; background: transparent;">
              <input type="submit" class="btn btn-primary shadow px-5 py-2 Id_submit" value="Add To Cart">
              <!-- <button type="submit" class="btn btn-primary shadow px-5 py-2">Add to Cart</button> -->
            </form>
            
          </div>
          <!-- </div>
        </div> -->
      </div>
    </div>
  </div>
  {% endfor %}

This code gives me the search results but I'm not getting how to show those values here again. This is the home page for products and when I search I want that search result are displayed on the homepage the same way as before.

SEARCH RESULTS IMAGE

Answer 1

When I use AJAX requests I send the data to a view through get.

function get_data(query) {
    $.ajax({
        url: '{% url 'your view' %}',
        dataType: 'json',
        data: {
            'query': query,
        },
        success: function (data) {
            if (!data.error) {
                if (data.items.length > 0) {
        var $html_content = '';
                    for (var $i = 0; $i < data.items.length; $i++) {
                        $contact_data += '<tr>';

                        # Format HTML ($html_content += 'your html from data';
                    }
                }

                $('#contact_content').html($html_content );
                $('#navigation').html(data.page.render);

            } else {
                console.log(data.error_message);
            }
        },
        error: function () {
            console.log('Couldnt collect data')
        }
    });
}

In the view I do:

def get_items(request):
data = {'error': True}

try:
    query = int(request.GET.get('query', None))
except:
    query = None

if query:
    data['error'] = False
data['items'] = [] #list with your data
else:
    data['error_message'] = 'No valid page index was given'

return JsonResponse(data)