Select Element

An element used to render a native select or Vue-Multiselect input.

Examples
Options
Properties
Methods
Slots
Events

#Examples

Basic Usage

Renders a native select input.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        select: {
          type: 'select',
          items: {
            apple: 'Apple',
            cherry: 'Cherry',
            orange: 'Orange'
          },
          default: 'cherry'
        }
      }
    })
  }
</script>

Searchable

Search among options using search option.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        select: {
          type: 'select',
          items: {
            apple: 'Apple',
            cherry: 'Cherry',
            orange: 'Orange'
          },
          search: true,
          default: 'orange'
        }
      }
    })
  }
</script>

Custom Option

Custom template for select options and selected option using slots.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        select: {
          type: 'select',
          items: {
            us: { name: 'United States', flag: 'https://lipis.github.io/flag-icon-css/flags/4x3/um.svg' },
            cn: { name: 'China', flag: 'https://lipis.github.io/flag-icon-css/flags/4x3/cn.svg' },
            in: { name: 'India', flag: 'https://lipis.github.io/flag-icon-css/flags/4x3/in.svg' }
          },
          default: 'us',
          search: true,
          trackBy: 'name',
          slots: {
            singleLabel: Vue.extend({
              props: ['el$', 'option'],
              template: `
                <span>
                  <img height="16" :src="option.flag" /> &nbsp;{{ option.name }}
                </span>
              `
            }),
            option: Vue.extend({
              props: ['el$', 'option'],
              template: `
                <span>
                  <img height="16" :src="option.flag" /> &nbsp;{{ option.name }}
                </span>
              `
            })
          }
        }
      }
    })
  }
</script>

Async Options

Loading select options asynchronously.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      timeout: null,
      schema: {
        select: {
          type: 'select',
          search: true,
          items: {},
          slots: {
            noOptions: Vue.extend({
              props: ['el$'],
              template: `<span>Start typing...</span>`
            })
          },
          options: {
            'internal-search': false
          },
          created() {
            this.on('searchChange', (searchQuery) => {
              this.loading = true

              if (this.timeout) {
                clearTimeout(this.timeout)
              }

              this.timeout = setTimeout(() => {
                if (!searchQuery) {
                  this.loading = false
                  return
                }

                this.items = {
                  searchQuery: searchQuery,
                  [searchQuery + '1']: searchQuery + '1',
                  [searchQuery + '2']: searchQuery + '2',
                }

                this.loading = false
              }, 400)
            })
          }
        }
      }
    })
  }
</script>

#Options

Name	Type	Description
items	`obj\|arr`	List of select options.
native	`boolean`	Determines whether the native select should be used by default.
search	`boolean`	Determines whether the select options should be searchable.
trackBy	`string`	When item values are objects this object element will be used to track search.
limit	`number`	Maximum number of search options.
default	`string`	Value of element when the form is initially loaded or reseted.
placeholder	`string`	The placeholder of the element.
floating	`string`	The floating label of the element.
disabled	`boolean`	Whether the field is disabled.
options	`object`	Additional options for the select.

#Properties

Name	Type	Default	Description
disabled	`boolean`	`false`	Whether the field is disabled.
items	`obj\|arr`	`null`	List of select options.
native	`boolean`	`true`	Determines whether the native select should be used by default.
trackBy	`string`	`'label'`	When item values are objects this object element will be used to track search.
search	`boolean`	`false`	Determines whether the select options are searchable.
limit	`number`	`1000`	Maximum number of search options.
defaultValue	`str\|num`	`null`	Value of element when the form is initially loaded or reseted.
placeholder	`string`	`null`	The placeholder of the element.
floating	`string`	`null`	The floating label of the element.
options	`object`	`{}`	Additional options for the select.
select$	`object`	`null`	The select element / component.
loading	`boolean`	`false`	Determines whether the element is going through async process to load options.
selectOptions	`array`	-	List of select options converted to an array of objects.
textValue	`string`	-	Retrieves the selected option's label.
selectedOption	`object`	-	Retrieves the selected option.
isNative	`string`	-	Determines if the native select is used.

#Methods

# .disable()

Disabled the field.

# .enable()

Enables the field.

#Slots

# option

Props

el$ object : The element component.
option object : Select option.
search string : Current value of search.

Contains the select option template.

# beforeList

Props

el$ object : The element component.

Component to be rendered before the option list.

# afterList

Props

el$ object : The element component.

Component to be rendered after the option list.

# noResult

Props

el$ object : The element component.

Component to be rendered when there are no search results.

# singleLabel

Props

el$ object : The element component.

Renders the selected value in the input field.

# noOptions

Props

el$ object : The element component.

Renders the select options list is empty.

#Events

# select(selectedOption)

Parameters

selectedOption object : the selected option.

Triggered when the user selects an option when using not native element.

# remove(removedOption)

Parameters

removedOption object : the removed option.

Triggered when the user removes a selected option.

# searchChange(searchQuery)

Parameters

searchQuery string : the current search query.

Triggered when the user changes the search criteria.

# open

Triggered when the option list is opened.

# close(value)

Parameters

value string : value of the select.

Triggered when the option list is closed.