Predictive search component

[warrensearle]

As part of jac-uk/admin#2528, we would like a predictive search component to enable users to find and select a single result.

User interface

The UI is expected to consist of a single text input box. As the user types, a number of matching results (up to 5) will display below the input box. The user will select a single matching result by any of the following actions:

Press enter to select the first/top result Use the up/down cursors to highlight any of the displayed results, then press enter to select the specific result Use the mouse to click a result to select a specific result

Props

The component should extend FormField and behave similarly to all other form fields (v-model, label, hint, error messaging).

Additionally, it should accept the following props:

data contains an array of data objects that are being searched. e.g. [ { id: '123', name: 'John Smith', referenceNumber: 'ABC0001' }, { id: '456', name: 'Prunela Underlay', referenceNumber: 'ABC0005' } ]

search-fields contains an array of field names being searched e.g.

[ 'name', 'referenceNumber' ]

Events

The component should set the v-model when a result has been selected. Additionally, it should emit the following event:

@selected Emitted when a single result has been selected Returns the data object that has been selected

Example

<PredictiveSearch 
  id="application"
  v-model="formData.application"
  label="Find an application"
  hint="Type any part of reference number or candidate name"
  :data="applications"
  :search-fields="['fullName', 'referenceNumber']"
  @selected="onApplicationSelected"
/>

[tomlovesgithub]

Please add your planning poker estimate with Zenhub @warrensearle

[tomlovesgithub]

https://x-govuk.github.io/govuk-prototype-components/autocomplete/