With for example a Vue Multiselect you can search through lots of data (for example users) asynchronously.
But is this performance technically the best? Because every time you change the search field a call is made to my API (backend made with Laravel). And when I clear the search field, all 10k+ users are retrieved from the database.
Is this performance technically the best to do, or are there other options to search through lots of data in a select box?
Vue code:
<template>
<div>
<label for="ajax">Async multiselect</label>
<multiselect v-model="selectedUsers" id="ajax" label="name" track-by="code" placeholder="Type to search" open-direction="bottom" :options="users" :multiple="true" :searchable="true" :loading="isLoading" :internal-search="false" :clear-on-select="false" :close-on-select="false" :options-limit="300" :limit="3" :limit-text="limitText" :max-height="600" :show-no-results="false" :hide-selected="true" @search-change="asyncFind">
</multiselect>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
export default {
components: {
Multiselect
},
data () {
return {
selectedUsers: [],
users: [],
isLoading: false
}
},
methods: {
limitText (count) {
return `and ${count} other users`
},
asyncFind (query) {
this.isLoading = true
axios.get('api/users', {
params: {
query: query
}
})
.then(response => {
this.users = response.data.users
this.isLoading = false
})
},
clearAll () {
this.selectedUsers = []
}
}
}
</script>
Laravel code
public function getUsers(Request $request)
{
$users= User::where('name', 'LIKE', '%' . $request->get('query') . '%')->get();
return response()->json([
'users' => $users
]);
}