Django ajax search button more than one data

Question

I have a django project. In this project, I made a search box with ajax, but the same data is coming more than once. Is the problem in ajax? or is the problem in django? I am not sure. Please help me.

Hey guys.I have a django project. In this project, I made a search box with ajax, but the same data is coming more than once. Is the problem in ajax? or is the problem in django? I am not sure. Please help me.

Hey guys.I have a django project. In this project, I made a search box with ajax, but the same data is coming more than once. Is the problem in ajax? or is the problem in django? I am not sure. Please help me. my html code


   enter code here


               {% csrf_token %}
               
               
           

           
               
                   Aradığınız sonuç bulunamadı. Lütfen aradığınız kelimeyi gözden geçiriniz.
               
               {% for posts in posts%}
               
                   
                       
                       
                           
                           

                           İzle
                       
                   

                   
                       
                           
                               
                                   {{posts.isim}} {{posts.soyisim}}
                               
                               
                                   {{posts.uzmanlik}}
                                   
                               
                                   
                                   
                                   
                                   
                                   
                               
                           
                           
                               
                                   
                                       Yorum Sayısı
                                   
                                   
                                       {{posts.yorum_sayi}}
                                   
                               
                               
                                   
                                       Danışan Sayısı
                                   
                                   
                                       {{posts.danisan_sayi}}
                                   
                               
                           
                       
                       
                           
                               Uzmanlıklar :
                                {{posts.hizmetler}} 
                           
                           
                               
                                   
                                       Profili İncele
                                   
                                   
                                       Randevu Al
                                   
                               
                           
                       
                   
               
               {% endfor %}

my ajax code


    enter code here

const nullDietitans = document.getElementById('null-search-dietitians')
const pagination = document.querySelector('.pagination')
const dietitiansContent = document.querySelector(".all-dietitans-content")
const dietitansFirstLoad = document.querySelectorAll('.all-dietitans-content > .dietitans[data-firs-load="true"]')
const searchInputChange=document.querySelector("#searchInputChange");

searchInputChange.addEventListener('input',(e)=>{
    nullDietitans.style.display = 'none'
    let searchValue=e.target.value.trim();
    
    if(searchValue.length>=3){
        if(searchValue === ''){
            dietitansFirstLoad.forEach(element=>{
                element.style.display = 'flex'
            })
            pagination.style.display = 'flex'
            document.querySelectorAll('.all-dietitans-content > .dietitans[data-search="true"]').forEach(element=>{
                element.remove()
            })
            nullDietitans.style.display = 'none'
        }
        else{
            fetch("/getDietitians",{
                body: JSON.stringify({searchText:searchValue}),
                method: "POST",

            })
            .then((res)=>res.json())
            .then((data)=>{
                console.log(data)
                dietitansFirstLoad.forEach(element=>{
                    element.style.display = 'none'
                })
                pagination.style.display = 'none'
                if(data.length > 0){
                    $.each(data,(index,value)=>{
                        $.each(data,(index1,value1)=>{
                            
                            $(".all-dietitans-content").append('' +
                                '' +
                                '' +
                                '' +
                                '
İzle
' +
                                value1.isim + ' ' + value1.soyisim +
                                '
' +
                                value1.uzmanlik +
                                '
Yorum Sayısı
' +
                                value1.yorum_sayi +
                                '
Danışan Sayısı
' +
                                value1.danisan_sayi +
                                '
Uzmanlıklar :
' +
                                value1.hizmetler +
                                '
' +
                                'Profili İncele' +
                                '
' +
                                'Randevu Al' +
                                '')
                        })
                    })
                }
                else{
                    nullDietitans.style.display = 'block'
                    document.querySelectorAll('.all-dietitans-content > .dietitans[data-search="true"]').forEach(element=>{
                        element.remove()
                    })
                }
            });
        }
    }
    else{
        dietitansFirstLoad.forEach(element=>{
            element.style.display = 'flex'
        })
        pagination.style.display = 'flex'
        document.querySelectorAll('.all-dietitans-content > .dietitans[data-search="true"]').forEach(element=>{
            element.remove()
        })
        nullDietitans.style.display = 'none'
    }

})

Nealium · Answer

It's because you're doing multiple queries and | to combine them, that's why it is returning duplicates.
instead of doing list = query1 | query2 use Q objects

@csrf_exempt
def getDietitians(request):
    from django.http import JsonResponse
    if request.method == "POST": 
        search_str=json.loads(request.body).get('searchText')

        from django.db.models import Q
        expenses = diyetisyenler.objects.filter(
            Q(isim__istartswith=search_str) | 
            Q(soyisim__istartswith=search_str) | 
            Q(uzmanlik__icontains=search_str) | 
            Q(hizmetler__icontains=search_str)
            )

        data=expenses.values()
        return JsonResponse(list(data),safe=False)

Edit

Answer: JS issue, the item list should be removed on every search

And I've worked with similar applications, so I'll drop some ideas I've done :)

Delay

It might be a good idea to add a delay, so it's not posting for every single keystroke.

Example: Searching for `abc`

Searches for a
Searches for ab
Searches for abc

With a delay, I've got it at 400 milliseconds, more than likely I'll just search once for abc - unless the person types super slow

View

// global unfortunately :(
var interval = 0;
var counter = 0;

$('#inputfield').on('input', function(e) {
    if (!$(this).is(':focus')){ return; }
    var search = $(this).val().trim();

    if (search){
        clearInterval(interval);
        interval = setInterval(function() {
            counter++;

            if (counter >= 4){ // 4 * 100 => 400 millisecond delay
                clearInterval(interval);
                counter = 0;

                searchfunction(this);
            };
        }, 100);
    }else{
        // Could clear results here
    };
};

Ping-Pong Timestamp

Larger Queries will sometimes overwrite smaller ones

Example:

Send search for a (query1) [takes 15 seconds]
Send search for absolutely (query2) [takes 2 seconds]
query2 returns
query1 returns, overwriting query2 (not good)

Solution

On Javascript POST, send 'time': Date.now(), along with search
In python return time with the results
- {'list':list(data), 'time':request.POST.get('time')}
On Javascript POST return, check if return is newer than rendered
- If newer: updated results & it's time (time would be any way to store when you sent the search for the what's rendered)
- If older: just skip the render