Autocomplete — share your use cases and implementations #2374
Replies: 22 comments 13 replies
-
|
Our team has coded an extension to the autocomplete to fix some common usability issues and extend the functionality. It's written as a drop in bit of code other teams can use and then expand on. Most of the features can be configured by adding the appropriate data-attributes on to each item on a select. We documented it in this blog post Improvements it makes:
We also did some work to have analytics on our autocompletes - so we know what people search for and what they ultimately pick - this helped us find gaps in the functionally or where we needed more synonyms. |
Beta Was this translation helpful? Give feedback.
-
|
Our most complex autocomplete is for searching for a school. This uses Ajax to live search our db using the user's query. There are around 40k entries. We use a hint to show additional school details that users can pick from. For non-js, we have a regular input with server-side search.
Blog post about the js search Prototyping with the autocompleteFor prototyping, I've wrapped the accessible autocomplete as a nunjucks component. The API could do with a bit of cleanup, but the object currently looks like this: {{ appAutocompleteFromSelect({
label: {
text: "Type of degree",
classes: "govuk-label--s"
},
hint: {
text: "Hint"
},
id: 'degreeTypeUK',
name: "degreeTemp[typeUK]",
items: items,
classes: "govuk-!-width-two-thirds",
value: degreeTemp.type,
autocompleteOptions: {
minLength: 2,
autoselect: false,
showSuggestionsBanner: true,
values: degreeTypeAutocompleteValues // optional values
}
} ) }}The component then renders out an html select with appropriate data attributes on each option. Our autocomplete code runs on all pages and inits for each select or input it finds, and gets the relevant data from the data attributes. This component has made setup of new autocompletes for prototypes much easier - as you usually just need to provide an array of data. There's a similar component for enhancing from an input rather than a select. |
Beta Was this translation helpful? Give feedback.
-
|
@edwardhorsford we have the same use case, with the same dataset/size. What we've found is that the autocomplete (even with |
Beta Was this translation helpful? Give feedback.
-
|
DfE has also been working on an autocomplete with revised styling for situations where the results are suggestions only, but the user is free to type whatever they want. This work was done with @frankieroberto and was influenced by the ONS' Census 2021 autocomplete. Autocomplete with suggestions: ONS Census 2021 autocomplete: |
Beta Was this translation helpful? Give feedback.
-
|
These are very nice indeed 😎 |
Beta Was this translation helpful? Give feedback.
-
|
One area where the autocomplete lacks is proper support for values that are separate from the visible text. Eg the text might be "Hogwarts academy" but you want to store a uuid value. This becomes important for larger sets where you might have several items with the same name. Selects support values and it half-works if you're using the |
Beta Was this translation helpful? Give feedback.
-
|
Working on service teams at HMRC I added some js and css to handle a few issues (link to Gist):
|
Beta Was this translation helpful? Give feedback.
-
|
On GOVUK Publishing we have a need for multiple selections as well as a single selection. An example of this can be found here. From my experience in working on publishing apps, I found that the following is needed to make the accessible autocomplete better:
The above basically describes the behaviours of the select2 plugin which is slightly different to the current implementation of the GOVUK Accessible Autocomplete. In my opinion, an accessible "select2" type component is what we need for almost all cases. |
Beta Was this translation helpful? Give feedback.
-
|
I feel like it would be worth exploring multiple standalone components serving different needs. Or at least thinking about the various use-cases and how our guidance could document them. Part of the challenge of the current autocomplete is that it can be extended very flexibly, but it's up to teams to modify, and you basically have to customise everything to get it working well and fix the usability gotchas. Different settings can have usability implications, but it's not obvious what these are. It would be so helpful to have worked examples of the different ways you can set it up, and the pros and cons of them. Some possible components: Enhanced select
Suggestion autocomplete
Autocomplete advanced
|
Beta Was this translation helpful? Give feedback.
-
|
We use autocompletes in a few places within Apply for teacher training. They fall into 2 categories. 1) Where users have to select an item from the listThese enhance a Nationality
Training provider
2) Where there is a list, but users can also type in their own answerThese enhance a Degree subject
University
What we’ve foundIt hasn’t always been clear whether users have to pick an option from the list or not. This could lead to users picking the "closest match" answer rather than typing in an accurate answer. To resolve this we added hint text, a "Suggestions" header and a gap between the input box and the options list. When there are no matches, we do not display the list or the heading, so that the input looks like a regular text input. In user research, we observed participants being able to both select an option and typing in their own answers. Where a user has to pick an item from the list, we generally display a down arrow, and have the list appear when focusing the input even if no characters have been entered. This makes it more similar to a regular dropdown list, so that users realise they have to pick an option. The downside to this is that not all users realise they can type in some characters to filter the list. |
Beta Was this translation helpful? Give feedback.
-
|
Cheers Frankie! I'd be interested to hear a bit more about the need behind option 2, where a user can type what they like but we give them suggestions as they type. Is it because users don't know what to type? Or does it help with matching data in the backend somewhere? |
Beta Was this translation helpful? Give feedback.
-
|
@christopherthomasdesign hiya. sorry for slow reply. The main benefit for the user of the option 2, where the autocomplete is added to a free text field, is that it can speed up their task and give them confidence that they have entered information in correctly. For example, when typing in their degree subject or university they might see their answer after only typing in a few characters, which saves a (small amount) of time and gives them a satisfying feeling that their answer was known and that they haven't made any typos, spelling mistakes or used a different term. It's a relatively marginal benefit for the user (depending on how long the overall task is), but I think this is one reason why it's acceptable as an "enhancement", with the no-javascript option of just having a free text field as an adequate fallback. As a secondary benefit, the autocomplete also gives the service "cleaner" data, with less likelihood of duplicates caused by typos, alternative names, and so on. This shouldn't be the only reason for doing it (as you could clean up that data separately), but can be an important side benefit when doing analysis of the data. |
Beta Was this translation helpful? Give feedback.
-
|
My team previously used the Issues:
I think having such a mode is worth keeping (see enhanced select suggestion above) - but would have it as a standalone thing and note that it's more suited to lists with not many items. I'd also restyle explicitly like a menu rather than an input. |
Beta Was this translation helpful? Give feedback.
-
|
@edwardhorsford We're about to do this for subject specialisms. The insights are appreciated. |
Beta Was this translation helpful? Give feedback.
-
|
I think the autocomplete could also do with in-built support for a 'clear' button or link. It's a PITA to use where there's a pre-filled value - it's not obvious you have to clear all text to search again. |
Beta Was this translation helpful? Give feedback.
-
|
There's this 2019 blog post from the GDS blog post investigating selecting multiple items for GOV.UK Finders that covers autocompletes. In particular they looked at some ways of possibly supporting selecting multiple: |
Beta Was this translation helpful? Give feedback.
-
|
I remember this work evolving while I was working on the Search team, and the current version is (I think) on the super-group finders, e.g. Guidance and regulation.
|
Beta Was this translation helpful? Give feedback.
-
|
HMRC Online Payments Service Part of our open banking journey requires the user to pick out the name of their bank account from a list. Its quite a long list and it was originally trialed with radios but it wasn't very practical so we now use the auto complete list. This works quite well as there are some items which are very similar such as Bank of Scotland Personal and Bank of Scotland Business. I'm not sure if any 'hacks' have been used to improve the function for our users. But if their bank isn't listed because its not part of open banking the user is shown other payment options behind the secondary button 'my account is not listed'.
|
Beta Was this translation helpful? Give feedback.
-
|
We use the autocomplete component to assign projects to internal Department for Education staff. See https://conversions-design-history.netlify.app/apply-to-become-academy/assign-a-project/#prototype-design We've noticed the following issue: Select a user from the autocomplete list
Change your mind and delete the contents of the auto-complete box
Click Continue. The person that was selected but deleted is assigned
We don't think this should happen - we think if you delete the text in the text field and click Continue, then it should not assign someone to the project. |
Beta Was this translation helpful? Give feedback.
-
|
@adyhoran1 We have seen this too - see earlier comment #2374 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
@adyhoran1 it's possible for you to fix / correct this. You can set up the autocomplete to submit the raw input string as well as the 'selected' select item. Your backend can then compare the two or see if it's blank and behave appropriately. I think in our prototype I also patched this in js so that we clear the select too if the value in the input is blank. |
Beta Was this translation helpful? Give feedback.
-
|
A possible use case for what's called Advanced Autocomplete above is address lookups. See for example the Royal Mail's at https://www.royalmail.com/find-a-postcode. |
Beta Was this translation helpful? Give feedback.
-
|
We've just added some guidance on how to 'share findings about your users' with us 📝. This will help us learn more about how your users autocomplete within your service. |
Beta Was this translation helpful? Give feedback.
-
|
I submitted this question/bug to your accessible-autocomplete issues a few days ago. There is a problem with our autocomplete when used with Dragon NaturallySpeaking. There is an issue, either with the autocomplete, or Dragon that prevents the form value being updated. I was wondering if this is a bug/issue that you are aware of at this time. |
Beta Was this translation helpful? Give feedback.
-
|
Is there anyway to make the assistiveHint attribute optional? I would like to removde the assistiveHint text "When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures." and the related aria-describedby being rendered. Is this an option. Alternatively could we make it visible and styled |
Beta Was this translation helpful? Give feedback.
-
|
One of the options lets you provide your own assistiveHint - I assume this could be used to effectively 'clear' it. Though it wouldn't be recommended, because it's probably good to tell screen reader users how to interact with the component. If you want instead for something to be visually shown, you'd need to add this yourself - eg use javascript to insert the appropriate element in the DOM after the component has loaded. |
Beta Was this translation helpful? Give feedback.
-
|
Note: I raised a bug earlier this year about AssistiveHints being broken in 2.04. |
Beta Was this translation helpful? Give feedback.
-
|
To add to the comment above, GOV.UK Publishing are still currently maintaining a version of the autocomplete which allows for multiple selections at https://github.com/alphagov/accessible-autocomplete-multiselect. However, it has recently failed an accessibility review because it does not announce the selections effectively or the presence of the "Remove" button for screenreaders. We are yet to decide at this point in time whether or not to invest in making the existing multiselect implementation more accessible, which we expect will be challenging, or to explore an alternative design pattern. |
Beta Was this translation helpful? Give feedback.
-
|
Would it be possible to call this component something other than 'autocomplete' so that we aren't using the same name for both this component and the autocomplete attribute that helps users to reuse previously filled data? When working on a team that has tickets relating to the autocomplete attribute alongside other tickets relating to this component, it's tricky to work out which tickets refer to which things! It would be great it we could remove the ambiguity. :) |
Beta Was this translation helpful? Give feedback.
-
|
HMRC Economic Crime Levy We've used this component successfully as part of our registration journey where we ask users 'Who is your AML supervisor?' - but deviating from the standard component using it within a radio dropdown. It was done to create focus on the main 3 supervisors, HMRC, the Gambling Commission and the Financial Conduct Authority and reduce the amount of 'Other' options on screen as it's quite a long list of 22 other professional bodies. It's tested well after iterating and adding 'Name of professional body' above the hint text. 
|
Beta Was this translation helpful? Give feedback.
-
|
Hi all, just sharing an issue which at least one of our live users has had with the accessible-autocomplete component, specifically how it is pre-filled when going back to change their answer after initially entering something they didn't mean to.
I've recorded a video which hopefully clarifies the issue they're having: Untitled.movThe first half of the video is the issue they're having, the second half is me spitballing a solution (you can ignore the second half - this was initially sent to a teammate who suggested I post on here). |
Beta Was this translation helpful? Give feedback.
-
|
@james-work-account agree this is an issue. I think the ideal would be that if My personal experience has been that the |
Beta Was this translation helpful? Give feedback.
-
|
We've implemented this as a workaround - a button on the page which clears the current input when clicked with JavaScript. It's not perfect but it's been received well by people who've tried it out. Screen.Recording.2024-07-05.at.16.57.10.movIt was a headache to get to work, so here's the Twirl template in case anyone else needs/wants to implement something similar: @import models.requests.DataRequest
@import views.html.helper.CSPNonce
@this(govukButton: GovukButton)
@(idToClear: String)(implicit request: DataRequest[_], messages: Messages)
@govukButton(
ButtonViewModel(Text(messages("site.clearSelectedCode")))
.withCssClass("no-print")
.withId("clear-selected-code")
.withAttribute("type", "button")
.asSecondaryButton()
)
<script @CSPNonce.attr>
document.getElementById('clear-selected-code').addEventListener('click', function () {
const element = document.getElementById('@idToClear');
element.value = "";
element.click();
element.focus();
});
</script> |
Beta Was this translation helpful? Give feedback.
-
|
To understand: Is this still the work that @edwardhorsford had blogged about in spring 2017? Is that work still ongoing? |
Beta Was this translation helpful? Give feedback.
-
|
@martin-jordan I think that work led to the accessible autocomplete but that predates the design system and hasn't yet been incorporated into it or updated to use the same javascript and css framework. The autocomplete is still on the backlog for the GOV.UK Design System team. I’m not sure where it currently sits in their roadmap or prioritisation. |
Beta Was this translation helpful? Give feedback.
-
We plan to revisit 'Autocomplete' to see if we can make this component more easily available, as well as up-to-date with the latest technologies and accessibility requirements.
About this work
Autocomplete is a text input that suggests options to the user as they type.
The community has worked on this in the past – see the accessible autocomplete repository, and the associated accessible autocomplete examples demo.
Previous conversation can be found at alphagov/govuk-design-system-backlog#4.
What we're looking for
We want to understand:
Beta Was this translation helpful? Give feedback.
All reactions