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"
/>
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 selectedExample