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="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" data-static-option-name-value="">
    
          <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
      })
    }}```
  
  </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.