서버 측 필터링 및 페이지 매김 작업에 맞게 자동 완성/선택 필드를 조정하는 방법

소개

프런트 엔드 개발에는 대부분의 문제에 대한 쉬운 솔루션을 제공하는 광범위한 구성 요소 프레임워크가 있습니다. 하지만 사용자 정의가 필요한 문제가 자주 발생합니다. 일부 프레임워크는 다른 프레임워크보다 이를 더 많이 허용하지만 모든 프레임워크가 똑같이 사용자 정의하기 쉬운 것은 아닙니다. Vuetify는 매우 상세한 문서를 제공하는 가장 기능이 풍부한 프레임워크 중 하나입니다. 하지만 실제로는 사소해 보이는 일부 기능을 조사하고 최적화된 솔루션을 찾는 데 여전히 상당한 시간이 걸릴 수 있습니다.

과제 식별

Vuetify의 자동 완성 구성 요소는 놀랍습니다. 시각적으로나 기능적으로 사용자 정의와 관련하여 사용자에게 다양한 옵션을 제공합니다. 일부 모드는 단일 속성으로 트리거될 수 있지만 다른 모드는 훨씬 더 많은 노력이 필요하며 해결 방법이 항상 간단하지는 않습니다. 이 기사에서는 무한 스크롤 개념을 활용하여 서버 측 필터링 및 페이지 매김을 구현하는 솔루션을 살펴보겠습니다. 또한, 여기서 논의된 기술은 v-select 구성요소에도 적용될 수 있습니다.

해결책: 서버 측 개선

이 장에서는 서버 측 로직으로 v-autocomplete를 향상시키는 솔루션을 간략하게 설명합니다. 먼저, 추가 조정에 사용될 자체 사용자 정의 구성 요소로 이를 래핑합니다. Vuetify의 v-intersect 지시문과 함께 내장된 추가 항목 슬롯을 사용하여 소위 무한 스크롤을 구현합니다. 이는 처음에는 소수의 레코드만 로드한다는 의미입니다. 앞서 언급한 조합을 사용하면 목록의 맨 아래에 도달하는 시점을 감지합니다. 그 시점에서 우리는 마지막에 도달할 때까지 다음 기록 페이지를 로드하라는 후속 요청을 자동으로 보냅니다.

이후에는 v-autocomplete의 속성을 조정하고, 프런트엔드 필터링을 비활성화하고, 적절한 표시기를 추가하고, 스크롤 위치를 처리하여 최종 사용자에게 원활하고 직관적인 경험을 보장함으로써 필터링을 포함하도록 솔루션을 확장할 것입니다. . 우리는 다음과 같이 끝날 것입니다:

설정

Vue 생태계에서 일반적으로 사용되는 매우 강력하고 사용자 정의가 가능한 구성 요소 프레임워크인 Vuetify와 결합된 일상 작업에 제가 선호하는 프레임워크인 Vue를 사용하여 기술적 구현을 ​​시연할 예정입니다. 여기에 사용된 개념은 널리 사용되는 JavaScript 기술의 다른 조합을 사용하여 적용될 수 있습니다.

Vue, Vuetify 버전에 따라 해결 방법이 조금씩 다를 수 있습니다. 두 버전 모두 꽤 오랫동안 출시된 버전 3.x이고 현재 업계 표준이므로 이 버전을 사용하겠습니다. 그러나 많은 활성 프로젝트에서 여전히 Vue 2/Vuetify 2를 사용하고 있으므로 중요한 메모를 남겨 두겠습니다. 내부 Vuetify 요소에 액세스하는 경우를 제외하면 일반적으로 차이점은 미미합니다($refs가 지원되지 않으므로 Vue 3에서는 수행하기가 더 어렵습니다).

먼저 새로운 빈 프로젝트를 생성하겠습니다. 기존 프로젝트에 솔루션을 추가하려는 경우 이 단락을 건너뛸 수 있습니다. NPM(노드 패키지 관리자)을 사용하여 npm create vue@latest 명령으로 프로젝트를 생성합니다. 기본 설정은 우리의 목적에 적합하지만 원하는 경우 변경할 수 있습니다. ESLint 및 Prettier 옵션을 활성화했습니다. Vue 프로젝트를 시작하는 다른 방법도 있지만 기본적으로 Vite를 개발 서버로 사용하기 때문에 이 방법을 선호합니다.

다음으로 Vuetify와 여기에 포함되지 않은 기본 종속성을 추가해야 합니다. 다른 아이콘 글꼴을 선택하거나 CSS에 대한 다른 옵션을 선호하지 않는 한 다음을 실행할 수 있습니다: npm install vuetify @mdi/font sass. 공식 문서에 따라 main.js 파일에서 Vuetify를 설정할 수 있습니다. 저처럼 MDI 아이콘을 사용하신다면 글꼴 라인을 잊지 마세요.

// 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');

저희 백엔드에는 JSON Placeholder라는 가짜 데이터가 포함된 무료 API 서비스를 사용하기로 결정했습니다. 프로덕션 앱에서 사용하는 것은 아니지만 최소한의 조정만으로 필요한 모든 것을 제공할 수 있는 간단하고 무료 서비스입니다.

이제 실제 코딩 과정을 살펴보겠습니다. 구성 요소 디렉터리 내에 새 Vue 파일을 만듭니다. 원하는 대로 이름을 지정하십시오. 저는 PaginatedAutocomplete.vue를 선택했습니다. 단일 v-autocomplete 요소를 포함하는 템플릿 섹션을 추가합니다. 이 요소를 데이터로 채우기 위해 구성 요소에 전달될 records 속성을 정의합니다.

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.

Overview and Conclusion

The journey doesn’t have to end here. If you need further customization, you can search the Vuetify documentation for ideas. There are countless possibilities waiting to be explored. For instance, you can try working with multiple values at once. This is already supported by Vuetify, but may need additional adjustments to be combined with our solutions. Still, this is a useful thing to have in many projects. Or, you can try template customization. You have the power to redefine the look and feel of your selection templates, list templates, and more. This opens the door to crafting user interfaces that align perfectly with your project's design and branding.

There are many other options in addition to those. In fact, the depth of customization available warrants the creation of additional articles to cover these advanced topics comprehensively. In the end, the Vue + Vuetify stack isn’t the only one that supports something like this. If you work with other frameworks, I encourage you to try to develop an equivalent to this on your own.

In conclusion, we transformed a basic component into a specialized solution that fits our needs. You've now armed yourself with a versatile tool that can be applied to a wide range of projects. Whenever you find yourself working with extensive lists of records, a server-side pagination and filtering solution becomes your go-to strategy. It not only optimizes the performance from the server's perspective, but also ensures a smoother rendering experience for your users. With some tweaks, we addressed some common issues and opened up new possibilities for further adjustments.

위 내용은 서버 측 필터링 및 페이지 매김 작업에 맞게 자동 완성/선택 필드를 조정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!