Uncaught TypeError: Cannot read property 'autocomplete' of undefined

[gamesbook]

I am in the process of upgrading an older Django project to Django 1.11 (prior to a move to version 2). I have installed django-selectable 1.3.0 but now the auto-complete no longer works. I have not changed any of the code in Django itself; this appears to be a JavaScript error BUT I am not a JavaScript programmer and cannot see how to solve this?

Notes below refer to the developer tools console in Chrome.

The Console tab reports:

Uncaught TypeError: Cannot read property 'autocomplete' of undefined at jquery.dj.selectable.js?v=1.3.0:17

The Network tab shows that jQuery-UI 1.11.4 and jQuery 1.12.4 are being loaded.

The Sources tab highlights line 17:

(function ($) {

	$.widget("ui.djselectable", $.ui.autocomplete, {

And hovering over the error shows the popup message "Uncaught TypeError: Cannot read property 'autocomplete' of undefined."

[vkurup]

I think I'm running into the same error, but only in the Django Admin. Everything works fine on Django 1.11, but when I upgrade to 2.2, I start getting the error you've noted in the console, and autocomplete doesn't function. Also, as you noted, jQuery and jQueryUI assets are loaded, and a console.log($.ui) right after they loads shows that jQuery UI loaded. But then, the admin's copy of jQuery loads, and right after that we try to load the selectable JS code and it fails. I'm guessing that the admin's copy of jQuery somehow erases $.ui, but it's strange because it is defined if I type it into the JS console (after the page loads)

The only change between Django 1.11 and Django 2.2 is that the admin is now using jQuery 3.5.1 instead of jQuery 2.2.3.

I can workaround the problem by manually loading all the of the assets like the last example in this section of the docs:

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/base/jquery-ui.css" type="text/css">
<link href="{% static 'selectable/css/dj.selectable.css' %}" type="text/css" media="all" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.js"></script>
<script type="text/javascript" src="{% static 'selectable/js/jquery.dj.selectable.js' %}"></script>

That doesn't get rid of the JS console error (which occurs when the form widget's media tries to load), but the autocomplete starts working again.

[gamesbook]

@vkurup Thank you for taking the time and trouble to look at this. In the meantime I have decided to switch to another autocomplete widget that seems to work without any problems.

[shapiromatron]

I think I'm running into the same error, but only in the Django Admin. Everything works fine on Django 1.11, but when I upgrade to 2.2, I start getting the error you've noted in the console, and autocomplete doesn't function. Also, as you noted, jQuery and jQueryUI assets are loaded, and a console.log($.ui) right after they loads shows that jQuery UI loaded. But then, the admin's copy of jQuery loads, and right after that we try to load the selectable JS code and it fails. I'm guessing that the admin's copy of jQuery somehow erases $.ui, but it's strange because it is defined if I type it into the JS console (after the page loads)

The only change between Django 1.11 and Django 2.2 is that the admin is now using jQuery 3.5.1 instead of jQuery 2.2.3.

I can workaround the problem by manually loading all the of the assets like the last example in this section of the docs:

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/base/jquery-ui.css" type="text/css">
<link href="{% static 'selectable/css/dj.selectable.css' %}" type="text/css" media="all" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.js"></script>
<script type="text/javascript" src="{% static 'selectable/js/jquery.dj.selectable.js' %}"></script>

That doesn't get rid of the JS console error (which occurs when the form widget's media tries to load), but the autocomplete starts working again.

Thanks @vkurup ; this works in 2021 using django 3.2 as well. Moving forward; will migrate to a new autocomplete library - do you have any recommendations that are a drop-in replacement for django-selectable?