[FIXED] Real Time Search in django Rendered Templetes

Issue

Project Details:-

1. template is rendered by using pagination in django view .
2. I used for loop in Templete (only for tr that contains td ) to display all results within the html table.
3. Pagination Logic is added to templete below the table tag.
4. There are various columns in table .

I want to Implement Real Time Search Functionlty to a table Rendered by django. Also , search should me made from all pages. And Only that entries should be shown which contains that string fron search box.

Solution

HTML :-

<input type="search" name="search" id="search_box" placeholder="Search Using Saral-ID or Name">

Django-View :

def search_form(request):
    pk = request.GET.get('id')
    filter_data = br_ambedkar_form.objects.filter(saral_id__contains=str(pk)) | br_ambedkar_form.objects.filter(applicant_name__contains=str(pk))
    return render(request , 'br_ambedkar_forms/search_table/search_table.html' , {
        'forms' : filter_data,
    })

Javascript:-

document.addEventListener('DOMContentLoaded' , ()=>{
    document.getElementById('search_box').addEventListener("keyup" , ()=>{
        search_value = document.getElementById('search_box').value;
        fetch(`/forms/search/?id=${search_value}`)
        .then(data => data.text())
        .then(text => {
            document.getElementById('table').innerHTML=text
        });
    })  
})

This Way I am able get real time Search.

Answered By - Gaurav Monga