How could i display search result based on filtered value provided by user?

Question

I have developed filter system where it provides 3 options such as property type, number of rooms, and maximum price. Every time they select filter options the user will get their search result instantly. For example, if a user has selected property type of Apartment and number of rooms as 4 and maximum price of 12000 then the user will get those rents whose property type is apartment with 4 rooms of 12000 mark. I developed the front-end part with React.js and could fetch user selected data successfully. I have also passed data to ajax but I have no idea how should I display the search results based on filtered value provided by user with no page loading.

Ajax code

$.ajax({
  type: 'GET',
  url: '/filter/space/',
  data{property:propertySelectedValue, room:roomSelectedValue, price:maxPrice},
  success: function(data){
    console.log(data['fields']);
  },
  error: function(XMLHttpRequest, textStatus, errorThrown){
    console.error("Status: " + textStatus); alert("Error: " + errorThrown);
  },
});

Views.py

class FilterSpace(View):
    def get(self,request,*args,**kwargs):
        property = request.GET.get('property',None)
        room = request.GET.get('room', None)
        price = request.GET.get('price', None)
        rental = Rental.objects.all()
        if room:
            rental = rental.filter(room=room)
            print('rental',rental)
        if price:
            rental = rental.filter(price__lte=price)
        if property:
            rental = rental.filter(property=property)
        rental_json =  serializers.serialize('json',rental)
        print('rental_json',rental_json)
        return HttpResponse(rental_json,content_type="application/json")

Answer 1

One thing you might consider doing is rendering the html to a string (django - render_to_string not working) on the server side and send that back in an ajax response along with the data. then replace the html where the list is contained with that rendered by the server.

Django:

def get_list(request, *args, **kwargs):
    items = Items.objects.filter(...)
    html = ""
    items = [] # actual data
    context = {
        "item_list": items,
        ...
    }

    for item in items:
        html = html + render_to_string(list_html_template, context, context_instance=RequestContext(request))
        items.append(item.to_json()) # You have to define this if you want it.

    return JsonResponse({
        "list_html": html,
        "items_data": itmes
    })

Template (list_html_template):

{% for item in item_list %}
<!-- render item here... -->
{% endfor %}

Javascript:

$.ajax({
    url: "url_for_get_list_view",
    dataType: "json",
    ...
    success: function(json) {
        $(list_container).html(json.list_html); // Will replace any current html in this container (i.e. refresh the list).
        /* You can also do stuff with json.items_data if you want. */
    }
});