Skip to content

08 v_autocomplete

Autocomplete components are used to provide a dropdown list of options that can be selected by the user. They are particularly useful for selecting from a large set of options or when the options are dynamic.

Props

Required:

  • url { type: String, required: true }, - required json object format
  • field { type: String, required: true }, - the field to be used for display default first field
  • listName { type: String, required: true, default: "list" }, - the name of the list to be displayed in the dropdown

Optional:

  • params { type: Object, required: true, default: {} }, wszystkie queryparametry
  • disabled { type: Boolean, default: false }
  • placeholder { type: String, default: '🔎' }
  • required { type: Boolean, default: false }
  • multi { type: Boolean, default: false } - allows multiple selections => change to textarea
  • tabindex { type: Number, default: 0 } - tabindex for the input field

Events

  • @updated - return object with the selected value

Examples

HTML
1
2
3
4
5
6
7
8
9
<v_autocomplete
  url="/api/srs/714-search/auto.json"  
  field="name"
  listName="item"
  v-model="api.data.item.itemName" 
  :queryParameters="{
    'search': api.data.item.itemName,
    'pscope': 'item'}">
</v_autocomplete>