프런트엔드에서 테이블에서 검색 기능 구현

Happy Holiday
ROXX 광고 달력 25일째 투고입니다.12시가 넘었지만 크리스마스 분위기는 크리스마스!
업무에서 프런트엔드(Nuxt.js제)에서 서버(Laravel제)로 요청을 보내기로 설정합니다.
데이터 내의 검색 기능 등은 기본적으로 서버 쪽에서 처리되지만, 최근에는 전면에서 이 기능을 실시할 기회가 생겼다
프런트엔드에서만 처리하므로 처리 속도를 높이고 API 액세스를 줄일 수 있습니다.🚀
이 문장에서 나는 그것의 실현 방법을 쓸 것이다.

구현 페이지

구현 개요

Vue.js

API 사용: PokéAPI

포켓몬 정보 얻기 API

페이지 제작 시 API 요청

프런트엔드에서 검색 처리

검색 기능 세부 정보

텍스트에 포함된 문자열로 검색

검색 문자열을 공간으로 분리하여 AND 검색(또는 OR 검색)

코드 설명

Template

template는 이렇게 썼습니다.
얻은 데이터에는 괴물의 이름만 열거되어 있다.
index.html

<div id="app">
  <input
    v-model="searchText"
    type="text"
    placeholder="Enter text"
  >
  <div
    v-for="(monster, key) in monstersList"
    :key="key"
  >
    <p>{{ monster.name }}</p>
  </div>
</div>

스크립트 - 데이터 검색

axios에서 API에서 데이터를 가져옵니다.
데이터 내의 monsters에 얻은 데이터를 대입하다.객체로 반환됨Object.freeze()이므로 동결할 수 있습니다.searchText 검색 키워드가 포함되어 있습니다.실제 처리는 이 다음에 쓰세요.
main.js

new Vue({
  el: '#app',
  data:() => ({
    monsters: null,
    searchText: '',
    url: 'https://pokeapi.co/api/v2/berry?limit=200'
  }),
  async created() {
    const res = await axios.get(this.url)
    this.monsters = res.data.results
  }
});

스크립트 - 검색 키워드 처리

이후 몬스터 이름과 대조하기 위해 검색 키워드에 있는 문자열을 처리합니다.
예를 들어 검색leppa 시, le ppa 같은 문자열에 공백이 있을 때 AND 검색이나 OR 검색을 할 수 있는 것은 자연스러운 것이다.
이렇게 하는 방법은 모든 문자를 그룹 요소에 넣는 것이다.
main.js

computed: {
  splittedSearchText() {
    return this.searchText.split(/[\s]+/)
  }
}

이렇게 하면 앞의 le ppa 문자열을 ["le", "ppa"] 그룹으로 대체합니다.

스크립트 - 검색 수행

검색 기능은 입력한 문자열과 같은 문자열을 포함하는 몬스터 이름을 추출하는 것을 말한다.
먼저 入力された文字列と同じ文字列を含む 처리하세요.
몬스터 그룹에 조건을 충족시킬 수 있는 방법을 추가합니다.
And 검색에서 사용Array.every, 또는 검색에서 사용Array.some합니다.
예시 코드는'및'검색을 실현합니다.
괴물 이름의 문자열에 검색 키워드 (splitted Search Text) 가 포함되어 있는지 확인하기 때문에 괴물을 하나하나 함수에 전달하고 대조한 후 되돌아오는 방법을 써야 한다.
main.js

methods: {
  filteredMonsters(monster) {
    if (this.splittedSearchText.every(el =>
        monster.name.includes(el)
      )
    ) {
      return true
    }
  }
}

상술한 방법을 사용하시오.
텍스트를 입력하는 동시에 처리할 수 있도록computed에서 설명합니다.
main.js

// computed に追加
monstersList() {
  if (!this.monsters) { // モンスターが存在しないときは空配列を返す
    return []
  }
  if (!this.searchText.length) { // 検索文字列が存在しないときは monsters をそのまま返す
    return this.monsters
  }
  return this.monsters.filter(monster => {
    return this.filteredMonsters(monster)
  })
}

완성+경품

약간 간단한 코드지만 전방에서 검색 기능을 실현했다🎉

기쁘고 싶은 점은 있지만 일본어 문자열로 같은 검색 기능을 할 때는 약간의 주의가 필요하다.알파벳을 입력할 때 검색도 도망가기 때문에 목록에 있는 몬스터가 증가하거나 줄어들어 보기 싫은 행동을 한다.
이럴 때 compositionstart과compositionend를 사용하여 검색 시기를 조정합시다.
index.html

<div id="app">
  <input
    v-model="searchText"
    type="text"
    placeholder="Enter text"
    @compositionstart="isComposing = true"
    @compositionend="isComposing = false"
  >
  <div
    v-for="(monster, key) in monstersList"
    :key="key"
  >
    <p>{{ monster.name }}</p>
  </div>
</div>

main.js

data: () => ({
  isComposing: false
}),
// computed に追加
monstersList() {
  if (!this.monsters) {
    return []
  }
  if (!this.searchText.length) {
    return this.monsters
  }
  /* 追加コード */
  if (this.isComposing) { // isComposing が true (日本語入力変換中) のとき、 monsters を返す
    return this.monsters
  }
  return this.monsters.filter(monster => {
    return this.filteredMonsters(monster)
  })
}

이런 설명을 통해 일본어를 변환할 때isComposing가 사실이기 때문에 처리하지 않는 것을 제어할 수 있습니다!
나는 전면에서 많은 일을 할 수 있어서 매우 기쁘다.
Happy Programming! 🌟 Happy Holiday! ☃️