1

I m trying to use Bootstrap autocomplete, with Django .. I Tested the calls and the ajax request sent successfully to my views, but i did not get response in my form.. due to an error appeared in the console of type: Uncaught TypeError: Cannot read property 'updatedItem' of undefined

The Error Appears multiple times with different names alternative to 'updatedItem' ---- and appears when i start typing in the form..

... What I M Missing Here Please!

views.py

def SearchMedical(request):
    results_pharmacy = None
    if request.GET.get('q'):
        q = request.GET['q']
        results_pharmacy = PharmacyDetails.objects.filter(name__istartswith = q).values_list('name',flat=True)
        json = list(results_pharmacy)
        return JsonResponse(json, safe=False)

search.html

<script src="https://cdn.jsdelivr.net/gh/xcash/bootstrap-autocomplete@master/dist/latest/bootstrap-autocomplete.min.js"></script>


       <form method="GET" action="{% url 'searchMedical' %}" id="searchMedical">

<input class="basicAutoComplete form-control rounded-0" autocomplete="off"  type="text" placeholder="Pharmacy name">
</form>


<script>
$('.basicAutoComplete').autoComplete({
    resolverSettings: {
        url: '{% url "searchMedical" %}'
    },
    minLength: 1

});
</script>
Desert Camel
  • 127
  • 11

1 Answers1

2

I Found my Error! I forgot to encapsulate my JQuery code inside the document ready event: $( document ).ready()

I COPED THIS EXPLANATION FROM SOME DOCS: Whenever you use jQuery to manipulate your web page, you wait until the document ready event has fired. The document ready event signals that the DOM of the page is now ready, so you can manipulate it without worrying that parts of the DOM has not yet been created. The document ready event fires before all images etc. are loaded, but after the whole DOM itself is ready.

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

Now My Code Works Fine after the following edit: (and you can use it in django)
search.html

<script>
    $(document).ready(function(){
$('.basicAutoComplete').autoComplete({
    resolverSettings: {
        url: '{% url "ajax_search" %}'
    },
    minLength: 1
});
    });
</script>
Desert Camel
  • 127
  • 11