Inputs Autocomplete

Open this example in a new window

Contents

    <div class="dpr-autocomplete-text-input" data-dpr-module="autocomplete-text-input">
    
      <div class="govuk-form-group">
        <label class="govuk-label govuk-!-font-weight-bold dpr-inline-label" for="people">
          People
        </label>
    
        <div id="people-hint" class="govuk-hint">
          (Optional)
        </div>
    
        <div class="govuk-input__wrapper">
    
          <input class="govuk-input  autocomplete-text-input-box govuk-input--width-20" id="people" name="people" type="search" aria-describedby="people-hint" autocomplete="off" aria-autocomplete="list" aria-expanded="false" aria-owns="people-list" haspopup="true" data-minimum-length="" data-resource-endpoint="" placeholder="Search" role="combobox" pattern="" display-name="People">
    
          <div class="govuk-input__suffix" aria-hidden="true">&#x1F50D;</div>
    
        </div>
    
      </div>
    
      <div id="people-list" class="autocomplete-text-input-list">
        <ul role="listbox" aria-label="Autocomplete options">
    
          <li class="autocomplete-text-input-item-hide">
    
            <button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="people" data-static-option-name-value="">
              Magnar Azure
            </button>
    
          </li>
    
          <li class="autocomplete-text-input-item-hide">
    
            <button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="people" data-static-option-name-value="">
              Quinctus Zainabu
            </button>
    
          </li>
    
          <li class="autocomplete-text-input-item-hide">
    
            <button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="people" data-static-option-name-value="">
              Paraskevi Munroe
            </button>
    
          </li>
    
          <li class="autocomplete-text-input-item-hide">
    
            <button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="people" data-static-option-name-value="">
              Gundega Johanneke
            </button>
    
          </li>
    
          <li class="autocomplete-text-input-item-hide">
    
            <button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="people" data-static-option-name-value="">
              Konjit Taina
            </button>
    
          </li>
    
          <li class="autocomplete-text-input-item-hide">
    
            <button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="people" data-static-option-name-value="">
              Lennie Alma
            </button>
    
          </li>
    
          <li class="autocomplete-text-input-item-hide">
    
            <button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="people" data-static-option-name-value="">
              Murad Ali
            </button>
    
          </li>
    
        </ul>
      </div>
    </div>
    

Nunjucks macro options

Name	Type	Required	Description
id	string	Yes	A unique identifier for the input.
name	string	Yes	The name of the input.
value	string	No	The current value of this input.
labelText	string	No	The text of the label displayed above this input.
items	array	No	A static list of options to choose from. See Items. This is ignored if the dynamic resource endpoint is set.
minimumLength	number	No	The minimum length of text before options are fetched/displayed.
dynamicResourceEndpoint	string	No	The API endpoint to call to fetch the dynamic values. This should contain a {prefix} token to be replaced by the current text value when the request is made.

Items

Name	Type	Required	Description
text	String	Yes	The value to be displayed and returned for the option.

    {%- from "dpr/components/_inputs/autocomplete-text-input/view.njk" import dprAutocompleteTextInput -%}
    
    {{ dprAutocompleteTextInput({
      id: 'people',
      name: 'people',
      items: [
        { text: 'Magnar Azure' },
        { text: 'Quinctus Zainabu' },
        { text: 'Paraskevi Munroe' },
        { text: 'Gundega Johanneke' },
        { text: 'Konjit Taina' },
        { text: 'Lennie Alma' },
        { text: 'Murad Ali' }
      ],
      labelText: 'People',
      minimumlength: 1
    }) }}

Overview

When to use

Use this component when users need to choose from a large set of options. Either populated statically, or dynamically from a remote API endpoint.

Example uses:

• Choosing an establishment name.
• Searching for a post code.
• Searching for a person's name.

When not to use

Do not use this component for a small set of options, or where discovery of the available options is important. In these cases a Radio input of similar may be a better option.