Comment adapter un champ de saisie semi-automatique/sélection pour fonctionner avec le filtrage et la pagination côté serveur

Introduction

Dans le développement front-end, il existe une vaste sélection de frameworks de composants qui offrent des solutions simples à la plupart des types de problèmes. Très souvent, cependant, vous rencontrez des problèmes qui nécessitent une personnalisation. Certains frameworks le permettent plus que d’autres, et tous ne sont pas aussi faciles à personnaliser. Vuetify est l'un des frameworks les plus riches en fonctionnalités avec une documentation très détaillée. En pratique, cependant, étudier certaines fonctionnalités apparemment triviales et trouver une solution optimisée peut encore prendre beaucoup de temps.

Identifier le défi

Le composant de saisie semi-automatique de Vuetify est incroyable. Il offre à l'utilisateur diverses options en matière de personnalisation, à la fois visuelles et fonctionnelles. Alors que certains modes peuvent être déclenchés avec une seule propriété, d’autres nécessitent beaucoup plus d’efforts et la solution n’est pas toujours simple. Dans cet article, je passerai en revue ma solution pour implémenter le filtrage et la pagination côté serveur, en tirant parti du concept de défilement infini. De plus, les techniques décrites ici peuvent également être appliquées au composant v-select.

La solution : améliorations côté serveur

Dans ce chapitre, nous présenterons notre solution pour booster la v-autocomplete avec une logique côté serveur. Tout d’abord, nous l’intégrerons dans notre propre composant personnalisé qui sera utilisé pour effectuer d’autres ajustements. En utilisant l'emplacement d'ajout d'élément intégré en combinaison avec la directive v-intersect de Vuetify, nous implémenterons ce que l'on appelle le défilement infini. Cela signifie que nous ne chargerons au début qu’une poignée d’enregistrements. Avec la combinaison susmentionnée, nous détecterons quand le bas de la liste sera atteint. À ce stade, nous enverrons automatiquement une demande de suivi pour charger la page suivante des enregistrements, jusqu'à ce que nous atteignions enfin le bas.

Après cela, nous élargirons notre solution pour inclure le filtrage en ajustant les propriétés de v-autocomplete, en désactivant le filtrage frontal, en ajoutant des indicateurs adéquats et en gérant les positions de défilement pour garantir une expérience fluide et intuitive pour l'utilisateur final. . Nous finirons avec quelque chose comme ceci :

Mettre les choses en place

La mise en œuvre technique sera démontrée avec Vue, mon framework préféré pour le travail quotidien, combiné à Vuetify, un framework de composants très robuste et hautement personnalisable couramment utilisé dans l'écosystème Vue. Notez que les concepts utilisés ici peuvent être appliqués en utilisant d'autres combinaisons de technologies JavaScript populaires.

La solution différera légèrement selon les versions de Vue et Vuetify. Étant donné que les versions 3.x des deux sont disponibles depuis un certain temps et constituent désormais des standards de l'industrie, je vais les utiliser. Je laisserai cependant des notes importantes pour Vue 2/Vuetify 2, car de nombreux projets actifs les utilisent encore. Les différences sont généralement mineures, sauf lorsqu'il s'agit d'accéder aux éléments internes de Vuetify (ce qui est plus difficile à faire dans Vue 3, car $refs n'est pas pris en charge).

Pour commencer, nous allons créer un nouveau projet vierge. Vous pouvez ignorer ce paragraphe si vous souhaitez ajouter la solution à un projet existant. A l'aide de Node Package Manager (NPM), nous allons créer le projet avec la commande : npm create vue@latest. Les paramètres par défaut conviennent à nos besoins, mais si vous préférez, vous pouvez les modifier. J'ai activé les options ESLint et Prettier. Il existe d'autres façons de lancer un projet Vue, mais je préfère celle-ci car elle utilise Vite comme serveur de développement par défaut.

Ensuite, nous devons ajouter Vuetify et les dépendances de base qui n'y sont pas incluses. Sauf si vous avez choisi une autre police d'icône ou préférez une autre option pour CSS, vous pouvez exécuter ceci : npm install vuetify @mdi/font sass. En suivant la documentation officielle, vous pouvez configurer Vuetify dans le fichier main.js. N'oubliez pas la ligne de police si vous utilisez des icônes MDI comme moi.

// file: main.js
import './assets/main.css';

import { createApp } from 'vue';
import App from './App.vue';

import '@mdi/font/css/materialdesignicons.css';
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import { VAutocomplete } from 'vuetify/components';
import { Intersect } from 'vuetify/directives';

const vuetify = createVuetify({
  components: { VAutocomplete },
  directives: { Intersect }
});

createApp(App).use(vuetify).mount('#app');

Pour notre back-end, j'ai choisi d'utiliser un service API gratuit avec de fausses données appelé JSON Placeholder. Bien que ce ne soit pas quelque chose que vous utiliseriez dans une application de production, il s’agit d’un service simple et gratuit qui peut nous fournir tout ce dont nous avons besoin avec un minimum d’ajustements.

Maintenant, plongeons-nous dans le processus de codage proprement dit. Créez un nouveau fichier Vue dans le répertoire des composants. Nommez-le comme vous le souhaitez - j'ai choisi PaginatedAutocomplete.vue. Ajoutez une section de modèle contenant un seul élément v-autocomplete. Pour remplir cet élément avec des données, nous définirons une propriété records qui sera transmise au composant.

For some minor styling adjustments, consider adding classes or props to limit the width of the autocomplete field and its dropdown menu to around 300px, preventing it from stretching across the entire window width.

// file: PaginatedAutocomplete.vue
<template>
  <v-autocomplete :items="items" :menu-props="{ maxWidth: 300 }" class="autocomplete">
    <!--  -->
  </v-autocomplete>
</template>

<script setup>
defineProps({
  items: {
    type: Array,
    required: true
  }
});
</script>

<style lang="scss" scoped>
.autocomplete {
  width: 300px;
}
</style>

In the App.vue file, we can delete or comment out the header and Welcome components and import our newly created PaginatedAutocomplete.vue. Add the data ref that will be used for it: records, and set its default value to an empty array.

// file: App.vue
<script setup>
import { ref } from 'vue';

import PaginatedAutocomplete from './components/PaginatedAutocomplete.vue';

const records = ref([]);
</script>

<template>
  <main>
    <PaginatedAutocomplete :items="records" />
  </main>
</template>

Adjust global styles if you prefer. I changed the color scheme from dark to light in base.css and added some centering CSS to main.css.

That completes the initial setup. So far, we only have a basic autocomplete component with empty data.

Controlling Data Flow with Infinite Scroll

Moving forward, we need to load the data from the server. As previously mentioned, we will be utilizing JSON Placeholder, specifically its /posts endpoint. To facilitate data retrieval, we will install Axios with npm install axios.

In the App.vue file, we can now create a new method to fetch those records. It’s a simple GET request, which we follow up by saving the response data into our records data property. We can call the function inside the onMounted hook, to load the data immediately. Our script section will now contain this:

// file: App.vue
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

import PaginatedAutocomplete from './components/PaginatedAutocomplete.vue';

const records = ref([]);

function loadRecords() {
  axios
    .get('https://jsonplaceholder.typicode.com/posts')
    .then((response) => {
      records.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });
}

onMounted(() => {
  loadRecords();
});
</script>

To improve the visual user experience, we can add another data prop called loading. We set it to true before sending the request, and then revert it to false after the response is received. The prop can be forwarded to our PaginatedAutocomplete.vue component, where it can be tied to the built-in v-autocomplete loading prop. Additionally, we can incorporate the clearable prop. That produces the following code:

// file: Paginated Autocomplete.vue
<template>
  <v-autocomplete
    :items="items"
    :loading="loading"
    :menu-props="{ maxWidth: 300 }"
    class="autocomplete"
    clearable
  >
    <!--  -->
  </v-autocomplete>
</template>

<script setup>
defineProps({
  items: {
    type: Array,
    required: true
  },

  loading: {
    type: Boolean,
    required: false
  }
});
</script>

// file: App.vue
// ...
const loading = ref(false);

function loadRecords() {
  loading.value = true;

  axios
    .get('https://jsonplaceholder.typicode.com/posts')
    .then((response) => {
      records.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    })
    .finally(() => {
      loading.value = false;
    });
}
// ...

<!-- file: App.vue -->
<!-- ... -->
<PaginatedAutocomplete :items="records" :loading="loading" />
<!-- ... -->

At this point, we have a basic list of a hundred records, but it’s not paginated and it doesn’t support searching. If you’re using Vuetify 2, the records won’t show up correctly - you will need to set the item-text prop to title. This is already the default value in Vuetify 3. Next, we will adjust the request parameters to attain the desired behavior. In a real project, the back-end would typically provide you with parameters such as page and search/query. Here, we have to get a little creative. We can define a pagination object on our end with page: 1, itemsPerPage: 10 and total: 100 as the default values. In a realistic scenario, you likely wouldn’t need to supply the first two for the initial request, and the third would only be received from the response. JSON Placeholder employs different parameters called _start and _limit. We can reshape our local data to fit this.

// file: App.vue
// ...
const pagination = ref({
  page: 1,
  perPage: 10,
  total: 100
});

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) => {
      records.value = response.data;
      pagination.value.total = response.headers['x-total-count'];
    })
    .catch((error) => {
      console.log(error);
    })
    .finally(() => {
      loading.value = false;
    });
}
// ...

Up to this point, you might not have encountered any new concepts. Now we get to the fun part - detecting the end of the current list and triggering the request for the next page of records. Vuetify has a directive called v-intersect, which can inform you when a component you attached it to enters or leaves the visible area in your browser. Our interest lies in its isIntersecting return argument. The detailed description of what it does can be found in MDN Web Docs. In our case, it will allow us to detect when we’ve reached the bottom of the dropdown list. To implement this, we will attach the directive to our v-autocomplete‘s append-item slot.

To ensure we don’t send multiple requests simultaneously, we display the element only when there’s an intersection, more records are available, and no requests are ongoing. Additionally, we add the indicator to show that a request is currently in progress. This isn’t required, but it improves the user experience. Vuetify’s autocomplete already has a loading bar, but it might not be easily noticeable if your eyes are focused on the bottom of the list. We also need to update the response handler to concatenate records instead of replacing them, in case a page other than the first one was requested.

To handle the intersection, we check for the first (in Vuetify 2, the third) parameter (isIntersecting) and emit an event to the parent component. In the latter, we follow this up by sending a new request. We already have a method for loading records, but before calling it, we need to update the pagination object first. We can do this in a new method that encapsulates the old one. Once the last page is reached, we shouldn’t send any more requests, so a condition check for that should be added as well. With that implemented, we now have a functioning infinite scroll.

// file: PaginatedAutocomplete.vue
<template>
  <v-autocomplete
    :items="items"
    :loading="loading"
    :menu-props="{ maxWidth: 300 }"
    class="autocomplete"
    clearable
  >
    <template #append-item>
      <template v-if="!!items.length">
        <div v-if="!loading" v-intersect="handleIntersection" />

        <div v-else class="px-4 py-3 text-primary">Loading more...</div>
      </template>
    </template>
  </v-autocomplete>
</template>

<script setup>
defineProps({
  items: {
    type: Array,
    required: true
  },

  loading: {
    type: Boolean,
    required: false
  }
});

const emit = defineEmits(['intersect']);

function handleIntersection(isIntersecting) {
  if (isIntersecting) {
    emit('intersect');
  }
}
</script>

// 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();
}
// ...

Efficiency Meets Precision: Moving Search to the Back-end

To implement server-side searching, we begin by disabling from-end filtering within the v-autocomplete by adjusting the appropriate prop value (no-filter). Then, we introduce a new property to manage the search string, and then bind it to v-model:search-input (search-input.sync in Vuetify 2). This differentiates it from the regular input. In the parent component, we capture the event, define a query property, update it when appropriate, and reset the pagination to its default value, since we will be requesting page one again. We also have to update our request parameters by adding q (as recognized by JSON Placeholder).

// file: PaginatedAutocomplete.vue
<template>
  <v-autocomplete
    :items="items"
    :loading="loading"
    :menu-props="{ maxWidth: 300 }"
    class="autocomplete"
    clearable
    no-filter
    v-model:search-input="search"
    @update:search="emitSearch"
  >
    <template #append-item>
      <template v-if="!!items.length">
        <div v-if="!loading" v-intersect="handleIntersection" />

        <div v-else class="px-4 py-3 text-primary">Loading more...</div>
      </template>
    </template>
  </v-autocomplete>
</template>

<script setup>
import { ref } from 'vue';

defineProps({
  items: {
    type: Array,
    required: true
  },

  loading: {
    type: Boolean,
    required: false
  }
});

const emit = defineEmits(['intersect', 'update:search-input']);

function handleIntersection(isIntersecting) {
  if (isIntersecting) {
    emit('intersect');
  }
}

const search = ref(null);

function emitSearch(value) {
  emit('update:search-input', value);
}
</script>

// file: App.vue
<script>
// ...
const query = ref(null);

function handleSearchInput(value) {
  query.value = value;

  pagination.value = Object.assign({}, { page: 1, perPage: 10, total: 100 });

  loadRecords();
}

onMounted(() => {
  loadRecords();
});
</script>

<template>
  <main>
    <PaginatedAutocomplete
      :items="records"
      :loading="loading"
      @intersect="loadNextPage"
      @update:search-input="handleSearchInput"
    />
  </main>
</template>

// file: App.vue
// ...
function loadRecords() {
  loading.value = true;

  const params = {
    _start: (pagination.value.page - 1) * pagination.value.perPage,
    _limit: pagination.value.perPage,
    q: query.value
  };
// ...

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.

// file: PaginatedAutocomplete.vue
// ...
import debounce from 'lodash/debounce';
// ...

// file: PaginatedAutocomplete.vue
// ...
const debouncedEmit = debounce((value) => {
  emit('update:search-input', value);
}, 500);

function emitSearch(value) {
  debouncedEmit(value);
}
// ...

Now that’s much better! However, if you experiment with various searches and examine the results, you will find another issue - when the server performs the search, it takes into account not only post titles, but also their bodies and IDs. We don’t have options to change this through parameters, and we don’t have access to the back-end code to adjust that there either. Therefore, once again, we need to do some tweaking of our own code by filtering the response data. Note that in a real project, you would discuss this with your back-end colleagues. Loading unused data isn’t something you would ever want!

// file: App.vue
// ...
.then((response) => {
      const recordsToAdd = response.data.filter((post) => post.title.includes(params.q || ''));

      if (pagination.value.page === 1) {
        records.value = recordsToAdd;
        pagination.value.total = response.headers['x-total-count'];
      } else {
        records.value = [...records.value, ...recordsToAdd];
      }
    })
// ...

To wrap up all the fundamental functionalities, we need to add record selection. This should already be familiar to you if you’ve worked with Vuetify before. The property selectedRecord is bound to model-value (or just value in Vuetify 2). We also need to emit an event on selection change, @update:model-value, (Vuetify 2: @input) to propagate the value to the parent component. This configuration allows us to utilize v-model for our custom component.

Because of how Vuetify’s autocomplete component works, both record selection and input events are triggered when a record is selected. Usually, this allows more customization options, but in our case it’s detrimental, as it sends an unnecessary request and replaces our list with a single record. We can solve this by checking for selected record and search query equality.

// file: App.vue
// ...
function handleSearchInput(value) {
  if (selectedRecord.value === value) {
    return;
  }

  query.value = value;

  pagination.value = Object.assign({}, { page: 1, perPage: 10, total: 100 });

  loadRecords();
}

const selectedRecord = ref(null);
// ...

<!-- file: App.vue -->
<template>
  <main>
    <PaginatedAutocomplete
      v-model="selectedRecord"
      :items="records"
      :loading="loading"
      @intersect="loadNextPage"
      @update:search-input="handleSearchInput"
    />
  </main>
</template>

<!-- file: PaginatedAutocomplete.vue -->
<!-- ... -->
  <v-autocomplete
    :items="items"
    :loading="loading"
    :menu-props="{ maxWidth: 300 }"
    :model-value="selectedItem"
    class="autocomplete"
    clearable
    no-filter
    v-model:search-input="search"
    @update:model-value="emitSelection"
    @update:search="emitSearch"
  >
<!-- ... -->

// file: PaginatedAutocomplete.vue
// ...
const emit = defineEmits(['intersect', 'update:model-value', 'update:search-input']);

function handleIntersection(isIntersecting) {
  if (isIntersecting) {
    emit('intersect');
  }
}

const selectedItem = ref(null);

function emitSelection(value) {
  selectedItem.value = value;

  emit('update:model-value', value);
}
// ...

Almost done, but if you are thorough with your testing, you will notice an annoying glitch - when you do a search, scroll down, then do another search, the dropdown scroll will remain in the same place, possibly causing a chain of new requests in quick succession. To solve this, we can reset the scroll position to the top whenever a new search input is entered. In Vuetify 2, we could do this by referencing the internal v-menu of v-autocomplete, but since that’s no longer the case in Vuetify 3, we need to get creative. Applying a unique class name to the menu allows us to select it through pure JavaScript and then follow up with necessary adjustments.

<!-- file: PaginatedAutocomplete.vue -->
<!-- ... -->
<v-autocomplete
  ...
  :menu-props="{ maxWidth: 300, class: `dropdown-${uid}` }"
  ...
>
<!-- ... -->

// file: PaginatedAutocomplete.vue
// ...
const debouncedEmit = debounce((value) => {
  emit('update:search-input', value);

  resetDropdownScroll();
}, 500);

function emitSearch(value) {
  debouncedEmit(value);
}

const uid = Math.round(Math.random() * 10e4);

function resetDropdownScroll() {
  const menuWrapper = document.getElementsByClassName(`dropdown-${uid}`)[0];
  const menuList = menuWrapper?.firstElementChild?.firstElementChild;

  if (menuList) {
    menuList.scrollTop = 0;
  }
}
// ...

There we have it, our custom autocomplete component with server side filtering and pagination is now complete! It was rather simple in the end, but I’m sure you would agree that the way to the solution was anything but with all these little tweaks and combinations we had to make.

If you need to compare anything with your work, you can access the source files through a GitHub repository here.

Überblick und Fazit

Die Reise muss hier nicht enden. Wenn Sie weitere Anpassungen benötigen, können Sie in der Vuetify-Dokumentation nach Ideen suchen. Es gibt unzählige Möglichkeiten, die darauf warten, erkundet zu werden. Sie können beispielsweise versuchen, mit mehreren Werten gleichzeitig zu arbeiten. Dies wird bereits von Vuetify unterstützt, erfordert jedoch möglicherweise zusätzliche Anpassungen, um mit unseren Lösungen kombiniert zu werden. Dennoch ist dies in vielen Projekten eine nützliche Sache. Oder Sie können die Anpassung der Vorlage ausprobieren. Sie haben die Möglichkeit, das Erscheinungsbild Ihrer Auswahlvorlagen, Listenvorlagen und mehr neu zu definieren. Dies öffnet die Tür zur Erstellung von Benutzeroberflächen, die perfekt zum Design und Branding Ihres Projekts passen.

Darüber hinaus gibt es viele weitere Optionen. Tatsächlich rechtfertigt die Tiefe der verfügbaren Anpassungen die Erstellung zusätzlicher Artikel, um diese fortgeschrittenen Themen umfassend abzudecken. Letztendlich ist der Vue + Vuetify-Stack nicht der einzige, der so etwas unterstützt. Wenn Sie mit anderen Frameworks arbeiten, empfehle ich Ihnen, selbst ein Äquivalent dazu zu entwickeln.

Abschließend haben wir eine Basiskomponente in eine spezialisierte Lösung umgewandelt, die unseren Anforderungen entspricht. Sie verfügen nun über ein vielseitiges Tool, das auf eine Vielzahl von Projekten angewendet werden kann. Immer wenn Sie mit umfangreichen Datensatzlisten arbeiten, ist eine serverseitige Paginierungs- und Filterlösung Ihre bevorzugte Strategie. Es optimiert nicht nur die Leistung aus Serversicht, sondern sorgt auch für ein flüssigeres Rendering-Erlebnis für Ihre Benutzer. Mit einigen Optimierungen haben wir einige häufig auftretende Probleme behoben und neue Möglichkeiten für weitere Anpassungen eröffnet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!