Search field

• Demo
• Props
• Events

Demo

Alice Munro

<search-field
  :initial-items="[
    { id: 1, value: 'Alice Munro' },
    { id: 2, value: 'Bob Dylan' },
    { id: 3, value: 'Doris Lessing' },
    { id: 4, value: 'Elfriede Jelinek' },
    { id: 5, value: 'Gao Xingjian' }
  ]"
  initial-id="1"
  initial-value="Alice Munro"
/>

Props

id	Type String Description The id of the input element

name	Type String Description The name of the input element

hidden-input-name

Type String Description The name of a hidden input field that will be populated with the selected item's id

initial-items

Type Array Description An array of items that will be used to display autocomplete suggestions ([{ id: 1, value: 'hey' }])

initial-value

Type String Description Initial value

initial-id

Type String, Number Description Initial id

src	Type String Description URL that will be used to fetch autocomplete suggestions (such as: /user/search?q=). A query will be appended to this URL. There is no need to define initial-items when a remote source is defined.

searching-label

Type String Default Searching... Description Displayed while a search is in progress

id-property

Type String Default id

value-property

Type String Default value

disabled

Type Boolean Default false Description Disable input

Events

selected

Parameters Item (Object) Description Emitted when an item gets selected