I am working on an autocomplete app that I want users be able to make address search through the backend of Django but somehow the Api doesn't fetch data through the script, why is the payload not showing any data in the log console but rather an empty list?, I have tried calling the data from the browser as in example http://127.0.0.1:8000/search/?address=val , which fetches the json data response with a payload of data of addresses that match my search, but when i pass the url in my javescript it returns an empty data list with a 200 response. My experience in Js is mediocre, since I'm a novice.

<script>
    new Autocomplete('#autocomplete',{

         search : input => {
             console.log(input)
             const url = "/search/?address=${input}"
             return new Promise(resolve => {
                 fetch(url)
                 .then( (response) => response.json())
                 .then( data => {
                    console.log(data)
                     resolve(data.data)
                     
                })
             })
         },
         onSubmit : result => {
             console.log(result)
            window.open('/search/?address=${result}')
         }
     })

     
</script>

here is my search box Html

 <h4>Seacrh for places</h4>
            <div id="autocomplete" class="autocomplete">
                <input class="autocomplete-input"/>
                <ul class="autocomplete-result-list"></ul>
              </div>

my view for search

def search_address(request):
    address =  request.GET.get('address')
    playload = []
    if address:
        fake_address_objs = Address.objects.filter(address__icontains=address)
        
        for fake_address_obj in fake_address_objs:
            playload.append(fake_address_obj.address)
        
    return JsonResponse({'status':200 , 'data': playload })

Returned empty data in the console log

Returned data in browser using http://127.0.0.1:8000/search/?address=v