# In admin interface, autocomplete\_fields not working and triggering JavaScript errors

**URL:** <https://forum.djangoproject.com/t/in-admin-interface-autocomplete-fields-not-working-and-triggering-javascript-errors/25185>\
**Category:** Mystery Errors\
**Created:** [November 9, 2023, 11:19pm UTC](https://forum.djangoproject.com/t/in-admin-interface-autocomplete-fields-not-working-and-triggering-javascript-errors/25185 "2023-11-09T23:19:10Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jonfroehlich](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/jonfroehlich/32/6692_2.png) [@jonfroehlich](https://forum.djangoproject.com/u/jonfroehlich)\
**Post date:** [November 9, 2023, 11:19pm UTC](https://forum.djangoproject.com/t/in-admin-interface-autocomplete-fields-not-working-and-triggering-javascript-errors/25185/1 "2023-11-09T23:19:10Z")

</div>

Would love some help with this one. I can’t find anything online about this particular error and struggling to debug/troubleshoot. Thank you!

I’m receiving the following JavaScript error in the Django admin interface when trying to use `autocomplete_fields`. Consequently, the autocomplete drop-down widgets are not populated. We’re running Django 4.2.5. If I comment out the `autocomplete_fields`, the drop-down widget is populated correctly and things work. All of our code is [open source here](https://github.com/makeabilitylab/makeabilitylabwebsite). The [admin code is here](https://github.com/makeabilitylab/makeabilitylabwebsite/tree/master/website/admin).

 ![image](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/6/8/6849ce8fc4e25a91ac56e55fd03824e3e23b5334.png)

The admin model looks like:

```auto
@admin.register(Publication)
class PublicationAdmin(admin.ModelAdmin):
    autocomplete_fields = ['poster', 'video', 'talk']

```

And then each of these fields correspond to other admin models like:

```auto
@admin.register(Talk)
class TalkAdmin(admin.ModelAdmin):
    list_display = ('title', 'date', 'get_speakers_as_csv', 'forum_name', 'location', 'talk_type')

    # search_fields are used for auto-complete
    search_fields = ['title', 'forum_name']

```

Here are the errors:

```auto
Uncaught TypeError: Cannot read properties of undefined (reading 'define')
    at en.js:3:106
    at en.js:3:755

```

```auto
jquery.min.js:16 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at Function.each (jquery.min.js:16:11175)
    at prepopulate_init.js:5:7

```

```auto
Uncaught TypeError: $(...).select2 is not a function
    at HTMLSelectElement.<anonymous> (autocomplete.js:7:24)
    at Function.each (jquery.min.js:16:11390)
    at $.fn.djangoAdminSelect2 (autocomplete.js:6:11)
    at HTMLDocument.<anonymous> (autocomplete.js:27:60)
    at Object.resolveWith (jquery.min.js:16:14211)
    at Function.ready (jquery.min.js:16:9196)
    at HTMLDocument.y (jquery.min.js:16:13679)

```

---

<div class="post-metadata">

**Author:** ![addwebsolution](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/addwebsolution/32/23762_2.png) [@addwebsolution](https://forum.djangoproject.com/u/addwebsolution)\
**Post date:** [November 10, 2023, 4:57am UTC](https://forum.djangoproject.com/t/in-admin-interface-autocomplete-fields-not-working-and-triggering-javascript-errors/25185/2 "2023-11-10T04:57:33Z")

</div>

I’ve found in your models that video is OneToOneField.

```auto
    video = models.OneToOneField(Video, on_delete=models.DO_NOTHING, null=True, blank=True)
    talk = models.ForeignKey(Talk, blank=True, null=True, on_delete=models.DO_NOTHING)
    poster = models.ForeignKey(Poster, blank=True, null=True, on_delete=models.DO_NOTHING)

```

and from official docs [The Django admin site | Django documentation | Django](https://docs.djangoproject.com/en/4.2/ref/contrib/admin/#modeladmin-options:~:text=ModelAdmin.autocomplete_fields%C2%B6-,autocomplete_fields,-is%20a%20list) here you can see that it is used with `ForeignKey` and/or `ManyToManyField` fields.

Also from ChatGPT I’ve got this  
"Django’s autocomplete\_fields feature primarily works with ForeignKey fields in the ModelAdmin. The purpose of autocomplete\_fields is to provide a convenient interface for selecting related objects in the admin interface.

If you have a OneToOneField in your model, you might not be able to use autocomplete\_fields directly on that field. However, you can use autocomplete\_fields on the ForeignKey field that is on the other end of the OneToOneField relationship"

---

<div class="post-metadata">

**Author:** ![jonfroehlich](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/jonfroehlich/32/6692_2.png) [@jonfroehlich](https://forum.djangoproject.com/u/jonfroehlich)\
**Post date:** [November 10, 2023, 1:32pm UTC](https://forum.djangoproject.com/t/in-admin-interface-autocomplete-fields-not-working-and-triggering-javascript-errors/25185/3 "2023-11-10T13:32:34Z")

</div>

Thanks for your response. But even if I remove `videos` from my autocomplete\_fields—so it is: `autocomplete_fields = ['poster', 'talk']`, I still get the same error.

This feels like a bug to me on the JavaScript side of Django. But I just don’t seem to have the skills to figure it out.

If you dive into

```auto
jquery.min.js:16 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at Function.each (jquery.min.js:16:11175)
    at prepopulate_init.js:5:7

```

The failing line is around `$.each(fields, function(index, field){` below

```auto
'use strict';
{
    const $ = django.jQuery;
    const fields = $('#django-admin-prepopulated-fields-constants').data('prepopulatedFields');
    $.each(fields, function(index, field) {
        $(
            '.empty-form .form-row .field-' + field.name +
            ', .empty-form.form-row .field-' + field.name +
            ', .empty-form .form-row.field-' + field.name
        ).addClass('prepopulated_field');
        $(field.id).data('dependency_list', field.dependency_list).prepopulate(
            field.dependency_ids, field.maxLength, field.allowUnicode
        );
    });
}

```

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [November 10, 2023, 1:37pm UTC](https://forum.djangoproject.com/t/in-admin-interface-autocomplete-fields-not-working-and-triggering-javascript-errors/25185/4 "2023-11-10T13:37:19Z")

</div>

Try it with a “private” or “incognito” browser window to ensure it’s not some type of browser-cache related situation. (Or verify in your network tab and runserver console that these JavaScript files are actually being retrieved from the server and not using what is cached.)

---

<div class="post-metadata">

**Author:** ![jonfroehlich](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/jonfroehlich/32/6692_2.png) [@jonfroehlich](https://forum.djangoproject.com/u/jonfroehlich)\
**Post date:** [November 10, 2023, 1:51pm UTC](https://forum.djangoproject.com/t/in-admin-interface-autocomplete-fields-not-working-and-triggering-javascript-errors/25185/5 "2023-11-10T13:51:56Z")

</div>

Thanks Ken. I just verified it’s not a browser-cache situation. ☹

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [November 10, 2023, 2:13pm UTC](https://forum.djangoproject.com/t/in-admin-interface-autocomplete-fields-not-working-and-triggering-javascript-errors/25185/6 "2023-11-10T14:13:20Z")

</div>

Very superficially, it looks like the select2 module isn’t being loaded. Check your network tab when you’re loading that admin page to verify that select2 is being requested and retrieved.

Side note: I added the autoselect function to a project of mine, and it works fine for me under Django 4.2.5.

---

<div class="post-metadata">

**Author:** ![jonfroehlich](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/jonfroehlich/32/6692_2.png) [@jonfroehlich](https://forum.djangoproject.com/u/jonfroehlich)\
**Post date:** [November 10, 2023, 2:17pm UTC](https://forum.djangoproject.com/t/in-admin-interface-autocomplete-fields-not-working-and-triggering-javascript-errors/25185/7 "2023-11-10T14:17:39Z")

</div>

Thanks Ken. I will check that.

Note that it was working at some point but not sure when things started failing… (e.g., if it was related to a Django upgrade or some other code change).

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [November 10, 2023, 2:37pm UTC](https://forum.djangoproject.com/t/in-admin-interface-autocomplete-fields-not-working-and-triggering-javascript-errors/25185/8 "2023-11-10T14:37:35Z")

</div>

So I had tested it originally under 4.2.7, then noticed you specifically referenced 4.2.5, so I downgraded my test environment. It worked fine in both cases.

(While bugs do make their way into Django, I always assume that _any_ problem is mine until absolutely proven that the problem is elsewhere. I never assume the bug is Django’s unless I’ve exhausted all other possibilities or I find a ticket identifying the issue.)

---

<div class="post-metadata">

**Author:** ![jonfroehlich](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/jonfroehlich/32/6692_2.png) [@jonfroehlich](https://forum.djangoproject.com/u/jonfroehlich)\
**Post date:** [November 10, 2023, 2:42pm UTC](https://forum.djangoproject.com/t/in-admin-interface-autocomplete-fields-not-working-and-triggering-javascript-errors/25185/9 "2023-11-10T14:42:33Z")

</div>

My philosophy is the same… but this is the first issue I’ve encountered in a long while with Django that I can’t figure out myself (e.g., via Stackoverflow sleuthing or simply debugging).

Will keep investigating. Thanks again.