Vue で検索関連付けを実装するにはどうすればよいですか?-Vue.js-php.cn

Vue で検索関連付けを実装するにはどうすればよいですか?

王林

リリース： 2023-06-25 09:28:23

オリジナル

1764 人が閲覧しました

ネットワーク技術の継続的な発展に伴い、ユーザーが必要なものを素早く見つけることができる検索機能を提供する Web サイトやアプリケーションがますます増えています。検索の関連付けは「オートフィル」とも呼ばれ、ユーザーが検索したいコンテンツをより早く見つけることができる機能です。 Vueでは検索関連付け機能を簡単に実装できます。この記事では、Vue を使用して簡単な検索関連付けコンポーネントを作成する方法を紹介します。

まず、関連リストを生成するために検索するオプションを含むデータソースが必要です。ここでは、偽のデータを含む単純な配列を使用できます。

const options = [
  { value: 'Java', label: 'Java' },
  { value: 'JavaScript', label: 'JavaScript' },
  { value: 'Python', label: 'Python' },
  { value: 'Ruby', label: 'Ruby' },
  { value: 'Swift', label: 'Swift' },
  { value: 'Kotlin', label: 'Kotlin' },
  { value: 'C#', label: 'C#' },
  { value: 'Go', label: 'Go' },
  { value: 'PHP', label: 'PHP' },
  { value: 'TypeScript', label: 'TypeScript' }
]

ログイン後にコピー

次に、検索ボックスと予測リストを表示する Vue コンポーネントを作成する必要があります。このコンポーネントでは、すべての関連する状態とプロパティを保存する data オブジェクトを作成します。これには、現在の検索語と、表示される関連付けのリストが含まれます。また、現在の検索語に基づいて options 配列をフィルター処理するための Vue 計算プロパティ filteredOptions も導入します。最後に、ユーザー入力を処理し、関連付け項目を選択するためのメソッドをいくつか追加する必要があります。

<template>
  <div class="search-wrapper">
    <input type="text" v-model="searchTerm" @input="handleInput" @keydown.enter="handleEnter">
    <ul v-if="showList">
      <li v-for="(option, index) in filteredOptions" :key="index" @click="handleSelect(index)">{{ option.label }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchTerm: '',
      showList: false,
      options: [
        { value: 'Java', label: 'Java' },
        { value: 'JavaScript', label: 'JavaScript' },
        { value: 'Python', label: 'Python' },
        { value: 'Ruby', label: 'Ruby' },
        { value: 'Swift', label: 'Swift' },
        { value: 'Kotlin', label: 'Kotlin' },
        { value: 'C#', label: 'C#' },
        { value: 'Go', label: 'Go' },
        { value: 'PHP', label: 'PHP' },
        { value: 'TypeScript', label: 'TypeScript' }
      ]
    }
  },
  computed: {
    filteredOptions () {
      return this.options.filter(option => option.label.toLowerCase().includes(this.searchTerm.toLowerCase()))
    }
  },
  methods: {
    handleInput () {
      this.showList = true
    },
    handleEnter () {
      if (this.filteredOptions.length > 0) {
        this.searchTerm = this.filteredOptions[0].label
        this.showList = false
      }
    },
    handleSelect (index) {
      this.searchTerm = this.filteredOptions[index].label
      this.showList = false
    }
  }
}
</script>

ログイン後にコピー

コードでは、まず data オブジェクトを設定します。このオブジェクトには、現在のユーザーが入力した検索語と、関連付けリストを表示するかどうかを制御するブール値が含まれます showList 、およびデータソースオプション。フィルタリング機能を実装するには、計算プロパティ filteredOptions を使用して、検索語に基づいてオプションをフィルタリングし、それを新しい配列にマップします。同時に 3 つのメソッドを定義しました:

handleInput: 入力ボックスの値が変更されたときにトリガーされるメソッド。このメソッドは showList true に設定します。
handleEnter: ユーザーが Enter キーを押したときにトリガーされるメソッド。このメソッドは、現在関連付けオプションがあるかどうかを確認し、存在する場合は、最初のオプションの値を検索語に設定し、showList を false に設定します。
handleSelect: ユーザーが関連付けリスト内のオプションをクリックしたときにトリガーされるメソッド。このメソッドは、選択したオプションの値を検索語に設定し、showList を false に設定します。

最後に、template で検索ボックスと関連リストを定義し、検索ボックスの値が searchTerm にバインドされています。 user コンテンツを入力すると、handleInput メソッドが呼び出され、それによって showList のステータスが更新されます。 showList が true の場合、関連付けリストが表示されます。リスト内の各オプションは、filteredOptions 配列内の要素にバインドされ、v-for を使用してレンダリングされます。ユーザーがオプションをクリックすると、handleSelect メソッドが呼び出され、選択したオプションの値が設定され、予測リストが閉じられます。

要約すると、Vue を使用して検索関連付けを実装するのは難しくないことがわかります。データソースを配列として設定し、検索用語に基づいてオプションをフィルタリングし、シンプルなメソッドとイベントを使用してユーザーの入力と選択を処理することで、検索予測コンポーネントを簡単に作成できます。

以上がVue で検索関連付けを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。