Question about performance when searching with Vue Multiselect asynchronously

Viewed 17

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
    ]);
}
0 Answers
Related