add autocomplete demo

Author: matthew-shaw

app/demos/forms.py

@@ -29,7 +29,7 @@
     SubmitField,
     TextAreaField,
 )
-from wtforms.validators import Email, EqualTo, InputRequired, Length, Optional, Regexp
+from wtforms.validators import Email, EqualTo, InputRequired, Length, Optional, Regexp, ValidationError
 
 from app.demos.custom_validators import RequiredIf
 
@@ -313,7 +313,9 @@ class ConditionalRevealForm(FlaskForm):
         # This will mark this field as required if the how_prefer_contacted is set to email
         validators=[
             RequiredIf(
-                "contact", "email", message="Enter an email address in the correct format, like name@example.com"
+                "contact",
+                "email",
+                message="Enter an email address in the correct format, like name@example.com",
             )
         ],
     )
@@ -322,7 +324,11 @@ class ConditionalRevealForm(FlaskForm):
         "Phone number",
         widget=GovTextInput(),
         validators=[
-            RequiredIf("contact", "phone", message="Enter a telephone number, like 01632 960 001 or +44 808 157 0192")
+            RequiredIf(
+                "contact",
+                "phone",
+                message="Enter a telephone number, like 01632 960 001 or +44 808 157 0192",
+            )
         ],
     )
 
@@ -339,3 +345,32 @@ class ConditionalRevealForm(FlaskForm):
     )
 
     submit = SubmitField("Continue", widget=GovSubmitInput())
+
+
+class AutocompleteForm(FlaskForm):
+    # Manually added list here, but could be dynamically assigned in server route
+    countries = [
+        "Canada",
+        "China",
+        "France",
+        "Germany",
+        "India",
+        "Italy",
+        "Japan",
+        "South Korea",
+        "United Kingdom",
+        "United States",
+    ]
+
+    country = StringField(
+        "Country",
+        widget=GovTextInput(),
+        validators=[InputRequired(message="Enter a country")],
+        description="Start typing and select a suggestion",
+    )
+
+    submit = SubmitField("Continue", widget=GovSubmitInput())
+
+    def validate_country(self, country):
+        if country.data.title() not in self.countries:
+            raise ValidationError(f"{country.data} is not a valid country")

app/demos/routes.py

@@ -5,7 +5,7 @@
 from werkzeug.exceptions import NotFound
 
 from app.demos import bp
-from app.demos.forms import BankDetailsForm, ConditionalRevealForm, CreateAccountForm, KitchenSinkForm
+from app.demos.forms import AutocompleteForm, BankDetailsForm, ConditionalRevealForm, CreateAccountForm, KitchenSinkForm
 
 
 @bp.route("/components", methods=["GET"])
@@ -66,3 +66,12 @@ def conditional_reveal():
         flash("Demo form successfully submitted", "success")
         return redirect(url_for("demos.forms"))
     return render_template("conditional_reveal.html", form=form)
+
+
+@bp.route("/forms/autocomplete", methods=["GET", "POST"])
+def autocomplete():
+    form = AutocompleteForm()
+    if form.validate_on_submit():
+        flash("Demo form successfully submitted", "success")
+        return redirect(url_for("demos.forms"))
+    return render_template("autocomplete.html", form=form)

app/templates/demos/autocomplete.html

@@ -0,0 +1,54 @@
+{% extends "base.html" %}
+
+{%- from 'govuk_frontend_jinja/components/breadcrumbs/macro.html' import govukBreadcrumbs -%}
+
+{% block pageTitle %}{%- if form.errors %}Error: {% endif -%}Autocomplete – GOV.UK{% endblock %}
+
+{% block beforeContent %}
+  {{ super() }}
+  {{ govukBreadcrumbs({
+    'collapseOnMobile': True,
+    'items': [
+        {
+            'text': "Home",
+            'href': url_for('main.index')
+        },
+        {
+            'text': "Forms",
+            'href': url_for('demos.forms')
+        },
+        {
+            'text': "Autocomplete"
+        }
+    ]
+  }) }}
+{% endblock %}
+
+{% block content %}
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+    {{ super() }}
+    <span class="govuk-caption-xl">Demo form</span>
+    <h1 class="govuk-heading-xl">Autocomplete</h1>
+
+    <form action="" method="post" novalidate>
+      {{ form.csrf_token }}
+
+      {{ form.country(params={
+        'spellcheck': true,
+        'attributes': {
+            'list': "countries"
+        },
+      }) }}
+
+      <datalist id="countries">
+        {% for country in form.countries %}
+          <option value="{{country}}">
+        {% endfor %}
+      </datalist>
+
+      {{ form.submit }}
+    </form>
+  </div>
+</div>
+{% endblock %}

app/templates/demos/forms.html

@@ -26,6 +26,7 @@
     <span class="govuk-caption-xl">Demo</span>
     <h1 class="govuk-heading-l">Forms</h1>
     <ul class="govuk-list govuk-list--bullet">
+      <li><a class="govuk-link" href="{{ url_for('demos.autocomplete') }}">Autocomplete</a></li>
       <li><a class="govuk-link" href="{{ url_for('demos.bank_details') }}">Bank details</a></li>
       <li><a class="govuk-link" href="{{ url_for('demos.conditional_reveal') }}">Conditional reveal</a></li>
       <li><a class="govuk-link" href="{{ url_for('demos.create_account') }}">Create account</a></li>