# Loading Options with AJAX

The search event provides a hook to load options from a parent component when the search text is updated. It is emitted with two parameters:

Search Event Parameters

  • search {String} The current search string
  • loading {Function} Accepts a boolean parameter to toggle the loading state
<v-select @search="fetchOptions" />
 * Triggered when the search text changes.
 * @param search  {String}    Current search text
 * @param loading {Function}	Toggle loading class
fetchOptions (search, loading) {
  //  ... do some asynchronous stuff!  

The loading function accepts a boolean parameter that will be assigned to the vue-select internal loading property. Call loading(true) to set the loading property to true - toggling the loading spinner. After your asynchronous operation completes, call loading(false) to toggle it off.

# Disabling Filtering

When loading server side options, it can be useful to disable the client side filtering. Use the filterable prop to disable filtering.

 * When true, existing options will be filtered
 * by the search text. Should not be used in
 * conjunction with taggable.
 * @type {Boolean}
filterable: {
	type: Boolean,
	default: true

# Loading Spinner

Vue Select includes a default loading spinner that appears when the loading class is present. The spinner slot allows you to implement your own spinner.

<div class="spinner" v-show="spinner">Loading...</div>

# Library Agnostic

Since Vue.js does not ship with ajax functionality as part of the core library, it's up to you to process the ajax requests in your parent component.

I recommend using axios for creating your applications HTTP layer, or fetch() for simple requests.

# Example

The codepen example wraps up all the above concepts and searches GitHub repositories. It also uses scoped slots to add some custom templating.