How to adapt an autocomplete/select field to work with server-side filtering and pagination

1

Vue.js

The technical implementation will be demonstrated with Vue, my preferred framework for everyday work, combined with Vuetify, a very robust and highly customizable component framework commonly used in the Vue ecosystem. Note that concepts used here can be applied using other combinations of popular JavaScript technologies.

#Front-End Frameworks #Javascript UI Libraries #JS Library 395 social mentions

2

Vite

To begin, we will create a new blank project. You can skip this paragraph if you’re looking to add the solution to an existing project. Using Node Package Manager (NPM), we will create the project with the command: npm create vue@latest. The default settings are fine for our purposes, but if you prefer, you can change them. I enabled ESLint and Prettier options. There are other ways to initiate a Vue project, but I prefer this one because it uses Vite as the development server by default.

#Software Development #Web Frameworks #Developer Tools 465 social mentions

3

Lo-Dash

If you try the search now and pay attention to the network tab in developer tools, you will notice that a new request is fired off with each keystroke. While our current dataset is small and loads quickly, this behavior is not suitable for real-world applications. Larger datasets can lead to slow loading times, and with multiple users performing searches simultaneously, the server could become overloaded. Fortunately, we have a solution in the Lodash library, which contains various useful JavaScript utilities. One of them is debouncing, which allows us to delay function calls by leaving us some time to call the same function again. That way, only the latest call within a specified time period will be triggered. A commonly used delay for this kind of functionality is 500 milliseconds. We can install Lodash by running the command npm install lodash. In the import, we only reference the part that we need instead of taking the whole library.

#Development Tools #Javascript UI Libraries #JavaScript Framework 99 social mentions

4

JSON Placeholder

// file: App.vue // ... Function loadRecords() { loading.value = true; const params = { _start: (pagination.value.page - 1) * pagination.value.perPage, _limit: pagination.value.perPage }; axios .get('https://jsonplaceholder.typicode.com/posts', { params }) .then((response) => { if (pagination.value.page === 1) { records.value = response.data; pagination.value.total = response.headers['x-total-count']; } else { records.value = [...records.value, ...response.data]; } }) .catch((error) => { console.log(error); }) .finally(() => { loading.value = false; }); } Function loadNextPage() { if (pagination.value.page * pagination.value.perPage >= pagination.value.total) { return; } pagination.value.page++; loadRecords(); } // ...

#Development #Online Services #Web Browsers 162 social mentions