Element-ui の組み込み 2 つのリモート検索 (ファジークエリ) の使用方法の説明

<テンプレート>
 <div id="アプリ">
  <!-- リモート検索の場合は、filterable と remote を使用します -->
  <el-選択
   v-model="値"
   フィルター可能
   リモート
   placeholder="キーワードを入力してください"
   :remote-method="リモートメソッド"
   :loading="読み込み中"
  >
   <!-- リモートメソッドによってカプセル化されたフック関数。ユーザーが入力ボックスにコンテンツを入力すると、この関数の実行がトリガーされます。
   入力ボックスに対応する値は、コールバック関数にパラメータとして渡されます。読み込みとは、リモート検索中の待機時間を意味します。つまり、読み込み中 -->
   <el-オプション
    v-for="オプション内の項目"
    :key="アイテム.値"
    :label="アイテム.ラベル"
    :value="アイテムの値"
   >
   </el-option>
  </el-select>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前:「アプリ」、
 データ（） {
  戻る {
   オプション: [],
   価値： []、
   読み込み中: false、
  };
 },
 メソッド: {
  // ユーザーがリモート検索ファジークエリを開始するためにコンテンツを入力すると、remoteMethodメソッドremoteMethod(query) {
   // ユーザーがコンテンツを入力した場合、データを取得するためのリクエストを送信し、リモートであいまいクエリを検索します if (query !== "") {
    this.loading = true; // データの取得を開始します // ここではリクエストの送信をシミュレートし、res はリクエストによって返されるデータと見なされます。
    res = [とする
     {
      ラベル: 「孫悟空」、
      値: 500、
     },
     {
      ラベル:「孫尚香」、
      値: 18,
     },
     {
      ラベル:「沙僧侶」、
      値: 1000、
     },
     {
      ラベル:「沙ジュニア兄弟」、
      値: 999、
     },
    ];
    this.loading = false // データを取得します // 次に、最初に取得したすべてのデータをフィルタリングし、関連するデータを新しい配列にフィルタリングして、this.options = res.filter((item)=>{ を使用してオプションに渡します

     // indexOf が 0 の場合、最初の単語のみが一致することを意味します。たとえば、Wang Wang Xiaohu のデータを検索するとフィルター処理されますが、Xiaohu Wang のデータはフィルター処理されません。 indexOf が 0 なので、何かで始まることを意味します // return item.label.toLowerCase().indexOf(query.toLowerCase()) == 0

     // indexOf が -1 より大きい場合、単語が出現する限りフィルタリングされます。たとえば、Wang Wang Xiaohu、Xiao Hu Wang、Xiao Wang Hu を検索すると、すべてフィルタリングされます。 indexOf は見つけることができないため、-1 を返します。
     // -1 より大きい場合は、先頭、中間、末尾のいずれであっても、存在する限り OK です。 return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
    })
   } それ以外 {
    this.options = [];
   }
  },
 },
};
</スクリプト>

<テンプレート>
 <div id="アプリ">
  <div>
   <el-オートコンプリート
    v-model="state2"
    :fetch-suggestions="クエリ検索"
    placeholder="コンテンツを入力してください"
    :トリガーオンフォーカス="false"
    @select="ハンドル選択"
    サイズ="小"
   </el-オートコンプリート>
  </div>
  <div>
   <ul>
    <li v-for="(item, index) in fruit" :key="index">{{ item.value }}</li>
   </ul>
  </div>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前:「アプリ」、
 データ（） {
  戻る {
   状態2: "",
   フルーツ：
    {
     値: "バナナ"、
     価格: "8.58",
    },
    {
     値: "チェリー"、
     価格: "39.99",
    },
    {
     値: "ウォールナット"、
     価格: "26.36",
    },
    {
     値: "マンゴー",
     価格: "15.78",
    },
   ]、
  };
 },
 メソッド: {
  // ステップ 2 // queryString が空でない場合は、ユーザーが何かを入力したことを意味します。ユーザーの入力をデータベースと比較します。あいまいな関連付けがある場合は、それを直接取得し、検索候補とともに入力ボックスに返します。入力ボックスには、返されたデータがドロップダウン ボックスの形式で表示され、ユーザーが選択できます。
  クエリ検索(クエリ文字列、cb) {
   クエリ文字列が "" の場合
    // コンテンツを入力した後にあいまい検索を実行する setTimeout(() => {
     let callBackArr = []; // 空の配列を準備します。これは最終的に入力ボックスに返される配列です // この res はリクエストを送信した後にバックエンドから取得されるデータです const res = [
      {
       値: "Apple",
       価格: "13.25",
      },
      {
       値: "Apple 1",
       価格: "13.25",
      },
      {
       値: "Apple 2",
       価格: "13.25",
      },
      {
       値: "Apple 3",
       価格: "13.25",
      },
      {
       値: "Apple 4",
       価格: "13.25",
      },
      {
       値: "Apple 5",
       価格: "13.25",
      },
      
     ];
     res.forEach((アイテム) => {
      // データベースを走査し、ユーザーが入力した単語をデータベース内の各項目と比較します // if (item.value.indexOf(queryString) == 0) { // 0 に等しく、何かで始まる if (item.value.indexOf(queryString) > -1) { // -1 より大きい。含まれている限り、位置は関係ありません // 関連データがある場合 callBackArr.push(item); // それを callBackArr に格納し、返して提示する準備をします }
     });
     // この一連のクエリ操作の後、配列がまだ空の場合は、関連するデータが見つからなかったことを意味し、データがないことが直接ユーザーに返されます if (callBackArr.length == 0) {
      cb([{ 値: "データなし", 価格: "データなし" }]);
     }
     // この一連のクエリ操作の後にデータが見つかった場合、関連データを含む配列 callBackArr がユーザーに表示されます。それ以外の場合は {
      cb(コールバックArr);
     }
    }, 1000);
   }
  },
  // handleSelect(item) に配置されているものをクリックします。
   this.fruit = []
   this.fruit.push(アイテム)
  },
 },
};
</スクリプト>