Initial setup

src/newsreader/core/forms.py

@@ -7,3 +7,9 @@ class CheckboxInput(forms.CheckboxInput):
     def get_context(self, name, value, attrs):
         context = super().get_context(name, value, attrs)
         return {**context, **attrs}
+
+
+class MultiAutoCompleteWidget(forms.TextInput):
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+        return context

src/newsreader/js/components/AutoCompleteInput.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+class AutoCompleteInput extends React.Component {
+  state = {
+    filteredSuggestions: [],
+    activeSuggestions: [],
+    showSuggestions: false,
+    userInput: '',
+  };
+
+  onChange(e) {}
+
+  onClick(e) {}
+
+  onKeyDown(e) {}
+
+  render() {
+    return (
+      <input
+        type="text"
+        onChange={this.onChange}
+        onKeyDown={this.onKeyDown}
+        value={this.state.userInput}
+      />
+    );
+  }
+}
+
+export default AutoCompleteInput;

src/newsreader/news/core/forms.py

@@ -2,6 +2,7 @@ from django import forms
 from django.forms.widgets import CheckboxSelectMultiple
 
 from newsreader.accounts.models import User
+from newsreader.core.forms import MultiAutoCompleteWidget
 from newsreader.news.collection.models import CollectionRule
 from newsreader.news.core.models import Category
 
@@ -21,7 +22,9 @@ class RulesWidget(CheckboxSelectMultiple):
 
 class CategoryForm(forms.ModelForm):
     rules = forms.ModelMultipleChoiceField(
-        required=False, queryset=CollectionRule.objects.none(), widget=RulesWidget
+        required=False,
+        queryset=CollectionRule.objects.none(),
+        widget=MultiAutoCompleteWidget,
     )
 
     user = forms.ModelChoiceField(
@@ -35,7 +38,6 @@ class CategoryForm(forms.ModelForm):
         super().__init__(*args, **kwargs)
 
         self.fields["rules"].queryset = CollectionRule.objects.filter(user=self.user)
-        self.fields["rules"].widget.category = self.instance
 
         self.fields["user"].queryset = User.objects.filter(pk=self.user.pk)