wagtail/wagtail-autocomplete

An Autocomplete edit handler for selecting Pages, Snippets, and more.

Wagtail Autocomplete

An edit handler for the Wagtail content editor allowing single or multi autocompleted selection of Pages, Snippets, or other models. The widget is written in React and can be used outside the Wagtail admin, if desired.

Join the Community at Wagtail Space!

Join us at Wagtail Space US this year! The Call for Participation and Registration for both Wagtail Space 2024 events is open. We would love to have you give a talk, or just us as an attendee in June.

• [Wagtail Space NL](https://nl.wagtail.space/), Arnhem, The Netherlands. 2024-06-14
• [Wagtail Space US](https://us.wagtail.space/), Philadelphia, PA. 2024-06-20 to 2024-06-22

Features

• Rapidly select related objects via a smooth autocomplete interface
• A drop-in alternative to FieldPanel
• Create new objects from the autocomplete input if your search turns up blank
• React component can be used outside of the Wagtail admin for public-facing forms
• Default theme shares the color scheme and styles of the Wagtail admin
• Easy to re-theme with BEM methodology

Who’s using it?

• The U.S. Press Freedom Tracker makes extensive use of this edit handler with its public-facing filters and content editor to rapidly select and create new related metadata objects.

Merge into wagtail/wagtail

Eventually we would like this to be merged into wagtail/wagtail. This will require some work on the Wagtail API.

• Support endpoints for non-Page models
• Support standard Django field lookups such as id__in
• Create objects from the API
• Permission system for non-administrator access to the API

Documentation

Our documentation is on Read the Docs and includes basic usage instructions as well as contribution guidelines.

Contributors

• Harris Lapiroff (Little Weaver Web Collective) for the UX and UI design
• Rachel Stevens (Little Weaver Web Collective)
• Emily Horsman (Little Weaver Web Collective)

wagtail-autocomplete's Issues

Add linters to tests

Extract SVG icons to components

Doesn't work with custom primary keys

The serialising methods seem to rely on the primary_key being the id field. Passing the primary key around explicitly instead would fix this. Assuming it's JSON and URL serialisable

Console error: Uncaught TypeError: window.initAutoCompleteWidget is not a function

I've upgraded to latest Wagtail, and getting the error:

Uncaught TypeError: window.initAutoCompleteWidget is not a function

This appears in the console, so the widget is not working. Any idea what might be happening, or how I can track this down?

Orderable support

Better handling of missing URLs

If a dev tries to use an AutocompletePanel but doesn't include the URL patterns, we should either throw an exception or at least render a warning.

Ordering

Thanks for a great project! Like it a lot.

I have a request from a client to be able order the selected objects. Is that something that has been considered for development? Or is it already supported?

Add autocomplete=off to input elements

Without autocomplete=off on the <input> element there can be a11y issues:

Possibility to query multiple fields for autocompleting

Right know we can supply which field the autocomplete should use like so:
autocomplete_search_field = "title_en"

I'm proposing we should allow querying more than one field. E.g.:
autocomplete_search_field = "title_en,title_sv"

Currently I monkey patched this in our project, but I'd be happy to contribute if this is something you'd want in this package.

Add Read The Docs integration

Add more trove classifiers to setup.py

Particularly "Framework :: Django" and "Framework :: Wagtail"

Here's an example of some classifiers we might want to add: https://github.com/FlipperPA/wagtailcodeblock/blob/master/setup.py#L32

More explicit behavior when using with ManyToMany/non-clusterable

Autocomplete requires a clusterable model and a parentalmanytomany field, but if you use a non-clusterable model and a standard manytomany, it just silently fails to write.

Two proposed solutions:

• Make it work with non-clusterables
• Have it throw an error/display a warning when someone tries to use it with non-clusterables

Support for Django 3

wagtail 2.8 came up with support for django 3
https://github.com/wagtail/wagtail/blob/master/CHANGELOG.txt#L20

But when upgrading the packages, wagtail-autocomplete breaks:

  File "/home/dori/.virtualenvs/project/lib/python3.8/site-packages/wagtailautocomplete/wagtail_hooks.py", line 1, in <module>
    from django.contrib.staticfiles.templatetags.staticfiles import static
ModuleNotFoundError: No module named 'django.contrib.staticfiles.templatetags'

As per https://stackoverflow.com/a/59935512, we need to import static from django.templatetags.static instead of django.contrib.staticfiles.templatetags.staticfiles

Update docs to warn about `autocomplete_label` when using model without `title` field

I have followed the instructions on using a custom search field.

However, even though I have specified an autocomplete_search_field on my Author model, I keep getting the following error:

AttributeError: 'Author' object has no attribute 'title'

Is a migration required to get the autocomplete to work with a custom model property?

Autocomplete Manager

As the amount of customization offered on autocompletable objects grows, it seems useful to organize the customizable attributes and methods into a single object. This idea grew out of the discussion in #47.

Currently you can customize autocomplete properties like so:

class MyAutocompletableModel(ClusterableModel):
    name = models.CharField(max_length=255)

    autocomplete_search_field = 'name'

    def autocomplete_label(self):
        return self.name

    @classmethod
    def autocomplete_create(kls: type, value: str):
        return kls.objects.create(name=value)

If implemented now, #36 would add yet another classmethod to the mix. To clean this up and keep it more organized, we'll introduce a new AutocompleteManager type. The default autocomplete manager would look something like this:

class AutocompleteManager(object):
    search_field = 'title'
    label_field = 'title'

    def search(self, model_class: type, value: str) -> QuerySet:
        query_kwargs = {'{}__icontains'.format(self.search_field): value}
        return model_class.objects.filter(**query_kwargs)

    def label(self, obj: models.Model) -> str:
        return getattr(obj, self.label_field)

A subclass of it might look like

class SearchingAutocompleteManager(AutocompleteManager):
    def search(self, model_class: type, value: str) -> QuerySet:
        return model_class.objects.search(value)

    # Notice that no `create` method is specified by default,
    # but can be specified on a subclass
    def create(self, model_class: type, value: str) -> models.Model:
        return model_class.objects.create(title=value)

    def label(self, obj: models.Model) -> str:
        return obj.__unicode__()

You would register a particular manager with a particular target either declaratively:

class MyAutocompletingPage(Page):
    # ...
    autocomplete_manager = SearchingAutocompleteManager()

or with a class decorator:

@autocompletable(SearchingAutocompleteManager())
class MyAutocompletingPage(Page):
    # ...

Add Python tests

Ensure component meets the Web Components punch list

https://www.paciellogroup.com/blog/2014/09/web-components-punch-list/

More elegant solution for deleted objects

Currently, #101 returns a 404 with the message that some objects might be missing or deleted. A more elegant solution would be to provide better error messages and error handling to indicate whether some objects got deleted and which id got deleted instead of returning a generic error message.

Published 0.8.1 release uses wrong colors

When installing the latest release, the autocomplete-widget looks weird:

It seems like the released package uses a temporarily generated dist.css, with custom colors. If I regenerate the dist.css from scratch as documented here, I get the right colors:

page history not working on field with AutocompletePanel

I have an AutocompletePanel sucessfuly assigned to one of my fields. Everything works as expected but page history does not reflect changes made to the corresponding field. If I inspect the content_json field of the two PageRevision pages in question, I do see the change. Yet in the admin UI of the "history" of my page where I compare versions they are marked as identical.

Simply switching back to a FieldPanel correctly shows the changes applied in the admin UI.

Am I missing something in my implementation or is this a bug?
Kind regards.

queryset for AutocompletePanel

Thank you for making AutocompletePanel, I look forward to see it merged in the core wagtail project.

I would like AutocompletePanel to only return a subset of objects from the target_model. Is that a feature you would be interested in implementing? Do you have a suggestion for an alternative way to handle this at the moment?

I was hoping that I could do something like ModelAdmin.get_queryset, to be able to filter depending on request.user

Currently using:

• Django==2.2.4
• wagtail==2.6.1
• wagtail-autocomplete==0.3.1

Edit: I asked the same question on StackOverflow

Question: Using Autocomplete widget in FieldBlock

Hello everyone,

Is it supported to use Autocomplete widget in FieldBlock?

I have successfully created it but am not sure if is supported, recommended or best practice.

Code:

class CountryAutocomplete(Autocomplete):
    target_model = Country
    can_create = False
    is_single = False


class CountriesBlock(FieldBlock):
    def __init__(self, required=True, help_text=None, **kwargs):
        self.field = forms.ModelMultipleChoiceField(
            Country.objects.all(), widget=CountryAutocomplete
        )
        super().__init__(**kwargs)

    def get_prep_value(self, value):
        if value is None:
            return None
        return [obj.pk for obj in value]


class VideoBlock(StructBlock):
    countries = CountriesBlock("countries")

If it is, maybe it would be good idea add example to documentation.

Wagtail 2 compatibility

Use official Wagtail API for fetching and searching objects

• Replace search/ endpoint with PagesAPIEndpoint
• Replace objects/ endpoint

Input text hidden behind search icon

The search text is hidden behind the search icon. It seems like the paddin-left: 44px property was overridden and thus not in effect.

Wagtail version: 2.12.2
Django version: 3.1.6
Wagtail autocomplete version: 0.6

Add icons to Wagtail

https://github.com/wagtail/wagtail/wiki/Adding-new-icons

Support a list of page types

Currently you can specify a model other than wagtailcore.Page but only one. We'd like support for multiple types in the future.

Integrate with Wagtail core

see wagtail/wagtail#4798

Use computed property for autocomplete search

Is it possible to use a model property for the autocomplete_search_field? E.g. a property like full_name that concatenates two fields first_name and last_name?

Design is broken , search icon and input suggestions appearing in wrong positions

the search icon and field suggestion are appearing in weird position since I updated to the newest version of wagtail-autocomplete

Django==3.1.7
wagtail==2.12.3
wagtail-autocomplete==0.6.1

Handle server errors related to blank API exclusion clauses

When we upgraded to 0.6, we started getting server errors from pages using wagtail-autocomplete.

The autocomplete forms were generating faulty API calls like these:

/admin/autocomplete/search/?query=mortgage&type=ask_cfpb.AnswerPage&exclude=,,
/admin/autocomplete/search/?query=&type=ask_cfpb.AnswerPage&exclude=

I found two problems:

• There was a mix of variable names 'id' and 'pk' used for primary keys in React code.

  • line 62
  • line 94

• The search view wasn't catching bad parameters because it was testing an unevaluated query. was swallowing exceptions caused by bad parameters.

These are addressed in PR #77.

Not Work for Wagtail 3.0

AutocompletePanel does not work any more if Wagtail version is upgraded to 3.0.

Expose autocomplete javascript widgets

At pressfreedomtracker, we have used the autocomplete components as part of our react filter, though the flow has been very copy-pasty. It would be better to have a more standardized way of exposing autocomplete javascript widgets so that they can be used outside of the admin fields and in the generated site pages as well.

Needed release of package after release Wagtail 2.9

The latest version of wagtail-autocomplete on the PyPi is 0.5 and is not working with Wagtail 2.9.

There is proper change on the master branch https://github.com/wagtail/wagtail-autocomplete/blob/master/wagtailautocomplete/urls/admin.py which fixes the issue below.

Error:
ModuleNotFoundError: No module named 'wagtail.admin.decorators'

require_admin_access since wagtail 2.9 not exists under wagtail.admin.decorators.

Could you please release a new version?

Can I use this without react?

Is there a way to integrate this with my public-facing site that does not use react (it only uses jquery)?

AutocompletePanel does not work if is used inside "through" model of a manytomany

Example case:

from django.db import models

from modelcluster.models import ClusterableModel
from modelcluster.fields import ParentalKey, ParentalManyToManyField


class Book(ClusterableModel):
    title = models.CharField(max_length=100)
    synopsis = models.TextField()
    # ...
    
    panels = [
        FieldPanel('title'),
        InlinePanel('authors')
    ]


class Author(models.Model):
    name = models.CharField(max_lenght=100)
    # ...

    autocomplete_search_field = 'name'
    
    def autocomplete_label(self):
        return self.name
    
    @classmethod
    def autocomplete_create(cls, name):
        return cls.objects.create(name=name)


class BookAuthor(models.Model):
    ROLES = (
        ('principal', 'Principal'),
        ('collaborator', 'Collaborator'),
        ('reviewer', 'Reviewer'),
    )
    book = ParentalKey(Book, related_name="authors")
    author = models.ForeignKey(Author, on_delete=models.CASCADE)
    role = models.CharField(max_length=15, choices=ROLES)

    panels =  [
        FieldPanel('book'),
        AutocompletePanel('author', page_type=Author),
        FieldPanel('role')
    ]

The problem is that, after pressing "new" button inside book's edition interface, AutocompletePanel does not render anything, but no error appear in js or django console. Simply the field is gone.

I've tried to use ClusterableModel for BookAuthor instead of models.Model and ParentalKey('Author') instead of models.ForeignKey but it still not working, so I think that maybe it is some kind of bug.

Add documentation for AutocompletePanel

• Basic AutocompletePanel usage
• Transition from PageChooserPanel or SnippetChooserPanel
• ClusterableModel example
• Clearer explanation of single vs multi usage
• Public API
• Add some illustrative gifs of it in action
• Custom properties on models: autocomplete_create and autocomplete_label

Object of type 'UUID' is not JSON serializable

When I define out my AutocompletePanel and the special field, I get the error Object of type 'UUID' is not JSON serializable. I am using a UUIDField as my pk 'id'. Is there any way to get past this error?

`page_type` optional, `is_single` removed

Both page_type and is_single should be able to be deduced from the related field.

page_type should be made optional. It should default to whatever model the related field points to. It should remain as an option to account for cases where the developer wants to limit to a model subclass.

is_single should be deprecated. There's no reason to use is_single=True for a ParentalManyToManyField any more than there is to use is_single=False for a ParentalKey.

Don't show "Create new" if input is blank

Useful errors for methods that rely on `autocomplete_*` methods and properties

Methods that require a model to have either title field or autocomplete_* properties/methods should raise a helpful exception if they're all absent.

Support min_num and max_num

Support wagtail admin hosted at a different prefix

apiBase is currently hardcoded https://github.com/wagtail/wagtail-autocomplete/blob/master/client/src/components/AutocompleteInput/index.js#L30

It would be good to support cases where the admin is hosted at a different prefix. eg /cms/autocomplete/

Submit to PyPI

• Resolve #13
• Update docs to include pip install wagtail-autocomplete
• Submit to PyPI

Ensure component is accessible through a screenreader

Add continuous integration

• Add a pytest setup
• Add a jest setup
• Integrate CircleCI to test branches

Ensure component is fully keyboard accessible

• When removing an item by focusing the remove icon and tapping Space, the focus should come back to the text input

Add Jest tests

• Suggestions component renders received suggestions
• Active suggestion in Suggestions component manipulable by keyboard
• .search--has-input applied when the component is visible and has suggestions
• fill me

WagTail autocomplete for other models

Since when performing filter, the fieldname is either title or the autocomplete_search_field attribute, the render_page should be amended to add returning autocomplete values using autocomplete_search_field attribute of the record.

def render_page(page):
    if getattr(page, 'specific', None):
        # For support of non-Page models like Snippets.
        page = page.specific
    if callable(getattr(page, 'autocomplete_label', None)):
        title = page.autocomplete_label()
    elif getattr(page, 'autocomplete_search_field', None):  # added
        title = getattr(page, getattr(page, 'autocomplete_search_field', None))
    else:
        title = page.title
    return dict(pk=page.pk, title=title)

Change `page_type` parameter to `model_type` or `content_type`

Since it can be something other than a page. There are also a few other places where we refer to page that we should probably refer instead to obj