Inputs Autocomplete

Open this example in a new window

Contents

    
      <input type="hidden" name="people" value="" data-autocomplete-hidden />
    
      <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="label.people" type="text" aria-describedby="people-hint" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="people-list" aria-haspopup="listbox" data-minimum-length="" placeholder="Search" pattern="" required="">
    
          <div class="govuk-input__suffix" aria-hidden="true">&#x1F50D;</div>
    
        </div>
    
      </div>
    
      <div class="autocomplete-text-input-list-container">
        <ul id="people-list" class="autocomplete-text-input-list autocomplete-text-input-list--hidden" role="listbox" aria-label="People">
    
          <li id="people-list-0" role="option" aria-selected="false" class="autocomplete-option autocomplete-text-input-item-hide" data-value="" data-display="Magnar Azure">
            Magnar Azure
          </li>
    
          <li id="people-list-1" role="option" aria-selected="false" class="autocomplete-option autocomplete-text-input-item-hide" data-value="" data-display="Quinctus Zainabu">
            Quinctus Zainabu
          </li>
    
          <li id="people-list-2" role="option" aria-selected="false" class="autocomplete-option autocomplete-text-input-item-hide" data-value="" data-display="Paraskevi Munroe">
            Paraskevi Munroe
          </li>
    
          <li id="people-list-3" role="option" aria-selected="false" class="autocomplete-option autocomplete-text-input-item-hide" data-value="" data-display="Gundega Johanneke">
            Gundega Johanneke
          </li>
    
          <li id="people-list-4" role="option" aria-selected="false" class="autocomplete-option autocomplete-text-input-item-hide" data-value="" data-display="Konjit Taina">
            Konjit Taina
          </li>
    
          <li id="people-list-5" role="option" aria-selected="false" class="autocomplete-option autocomplete-text-input-item-hide" data-value="" data-display="Lennie Alma">
            Lennie Alma
          </li>
    
          <li id="people-list-6" role="option" aria-selected="false" class="autocomplete-option autocomplete-text-input-item-hide" data-value="" data-display="Murad Ali">
            Murad Ali
          </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
      })
    }}```
  
  </div>
    
  

</div>

</div>


## 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.