mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-19 09:50:33 +03:00
- complete docs overhaul
This commit is contained in:
@@ -1,31 +0,0 @@
|
||||
## AJAX Remote Option Loading
|
||||
|
||||
|
||||
The `onSearch` prop allows you to load options via ajax in a parent component when the search text is updated. It is invoked with two parameters, `search` & `loading`.
|
||||
|
||||
#### onSearch Callback Parameters <small>search, loading</small>
|
||||
|
||||
`search` is a string containing the current search text. `loading` is a function that accepts a boolean value, and is used to toggle the 'loading' class on the top-level vue-select wrapper.
|
||||
|
||||
#### 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 id="spinner-example" :class="{loading:spinner}"><button class="btn btn-sm btn-default" @click="spinner = !spinner">Toggle Spinner</button>
|
||||
|
||||
<div class="spinner" v-show="spinner">Loading...</div>
|
||||
|
||||
#### Debounce Input
|
||||
|
||||
Vue Select also accepts a `debounce` prop that can be used to prevent `onSearch` from being called until input has completed.
|
||||
|
||||
#### 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.
|
||||
|
||||
|
||||
#### Example <small>GitHub API</small>
|
||||
|
||||
In this example, [Vue Resource](https://github.com/vuejs/vue-resource) is used to access the [GitHub API](https://developer.github.com/v3/).
|
||||
|
||||
<git-hub-search-basic></git-hub-search-basic><ajax-example></ajax-example></div>
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
```html
|
||||
<v-select
|
||||
:debounce="250"
|
||||
:on-search="getOptions"
|
||||
:options="options"
|
||||
placeholder="Search GitHub Repositories..."
|
||||
label="full_name"
|
||||
>
|
||||
</v-select>
|
||||
```
|
||||
```js
|
||||
data() {
|
||||
return {
|
||||
options: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getOptions(search, loading) {
|
||||
loading(true)
|
||||
this.$http.get('https://api.github.com/search/repositories', {
|
||||
q: search
|
||||
}).then(resp => {
|
||||
this.options = resp.data.items
|
||||
loading(false)
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -1,24 +0,0 @@
|
||||
```js
|
||||
/**
|
||||
* Accept a callback function that will be run
|
||||
* when the search text changes. The callback
|
||||
* will be invoked with these parameters:
|
||||
|
||||
* @param {search} String Current search text
|
||||
* @param {loading} Function(bool) Toggle loading class
|
||||
*/
|
||||
onSearch: {
|
||||
type: Function,
|
||||
default: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Milliseconds to wait before invoking this.onSearch().
|
||||
* Used to prevent sending an AJAX request until input
|
||||
* has completed.
|
||||
*/
|
||||
debounce: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user