Erklärung zur Verwendung der beiden in Element-ui integrierten Remote-Suchen (Fuzzy-Abfragen)

<Vorlage>
 <div id="app">
  <!-- Verwenden Sie für die Remote-Suche filterable und remote -->
  <el-Auswahl
   v-Modell="Wert"
   filterbar
   Fernbedienung
   Platzhalter="Bitte geben Sie Schlüsselwörter ein"
   :remote-method="entfernteMethode"
   :wird geladen="wird geladen"
  >
   <!-- Durch Remote-Methode gekapselte Hook-Funktion. Wenn der Benutzer Inhalt in das Eingabefeld eingibt, wird die Ausführung dieser Funktion ausgelöst.
   Der dem Eingabefeld entsprechende Wert wird als Parameter an die Callback-Funktion übergeben. Mit Loading ist die Wartezeit bei der Remote-Suche gemeint, also: loading -->
   <el-Option
    v-for="Element in Optionen"
    :Schlüssel="Artikel.Wert"
    :label="Artikel.label"
    :Wert="Artikel.Wert"
   >
   </el-Option>
  </el-Auswahl>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "App",
 Daten() {
  zurückkehren {
   Optionen: [],
   Wert: [],
   wird geladen: falsch,
  };
 },
 Methoden: {
  // Wenn der Benutzer Inhalt eingibt, um die Fuzzy-Abfrage der Remote-Suche zu starten, die Methode remoteMethod remoteMethod(query) {
   // Wenn der Benutzer Inhalt eingibt, senden Sie eine Anforderung zum Abrufen der Daten und suchen Sie remote nach einer Fuzzy-Abfrage, wenn (Abfrage !== "") {
    this.loading = true; // Datenabruf starten // Hier simulieren wir das Senden einer Anfrage und „res“ wird als die von der Anfrage zurückgegebenen Daten betrachtet.
    lass res = [
     {
      Beschriftung: "Sun Wukong",
      Wert: 500,
     },
     {
      Etikett: "Sonne Shangxiang",
      Wert: 18,
     },
     {
      Bezeichnung: "Sha Mönch",
      Wert: 1000,
     },
     {
      Etikett: "Sha Junior Bruder",
      Wert: 999,
     },
    ];
    this.loading = false // Daten abrufen // Anschließend alle zuerst abgerufenen Daten filtern, die zugehörigen Daten in ein neues Array filtern und diese mit this.options = res.filter((item)=>{ an die Optionen übergeben.

     // indexOf gleich 0 bedeutet, dass nur das erste Wort übereinstimmt, z. B.: Die Suche nach den Daten von Wang Wang Xiaohu wird herausgefiltert, die Daten von Xiaohu Wang werden jedoch nicht herausgefiltert. Da indexOf gleich 0 ist, bedeutet dies, dass es mit etwas beginnt // return item.label.toLowerCase().indexOf(query.toLowerCase()) == 0

     // Ein Index größer als -1 bedeutet, dass das Wort herausgefiltert wird, solange es vorkommt. Beispiel: Bei der Suche nach Wang Wang Xiaohu, Xiao Hu Wang und Xiao Wang Hu werden alle herausgefiltert. Da indexOf es nicht finden kann, wird -1 zurückgegeben.
     // Größer als -1 bedeutet, dass es OK ist, solange es existiert, egal ob es am Anfang, in der Mitte oder am Ende steht return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
    })
   } anders {
    diese.Optionen = [];
   }
  },
 },
};
</Skript>

<Vorlage>
 <div id="app">
  <div>
   <el-Autovervollständigung
    v-Modell="Zustand2"
    :fetch-suggestions="AbfrageSuche"
    Platzhalter="Bitte Inhalt eingeben"
    :Trigger bei Fokus="falsch"
    @select="Auswahlgriff"
    Größe="klein"
   ></el-autocomplete>
  </div>
  <div>
   <ul>
    <li v-for="(Artikel, Index) in Obst" :Schlüssel="Index">{{ Artikel.Wert }}</li>
   </ul>
  </div>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "App",
 Daten() {
  zurückkehren {
   Zustand2: "",
   Obst:
    {
     Wert: "Banane",
     Preis: "8,58",
    },
    {
     Wert: "Kirsche",
     Preis: "39,99",
    },
    {
     Wert: "Walnuss",
     Preis: "26,36",
    },
    {
     Wert: "Mango",
     Preis: "15,78",
    },
   ],
  };
 },
 Methoden: {
  // Schritt 2 // Wenn queryString nicht leer ist, bedeutet das, dass der Benutzer etwas eingegeben hat. Wir vergleichen die Eingabe des Benutzers mit der Datenbank. Wenn es eine Fuzzy-Assoziation gibt, rufen wir diese direkt ab // und geben sie mit Suchvorschlägen an das Eingabefeld zurück. Das Eingabefeld präsentiert die zurückgegebenen Daten in Form einer Dropdown-Box, aus der der Benutzer auswählen kann.
  AbfrageSuche(Abfragezeichenfolge, cb) {
   wenn (Abfragezeichenfolge != "") {
    // Nach Eingabe des Inhalts eine unscharfe Suche durchführen setTimeout(() => {
     let callBackArr = []; // Bereite ein leeres Array vor, das schließlich an das Eingabefeld zurückgegeben wird // Diese Res sind die Daten, die nach dem Senden der Anfrage vom Backend erhalten werden const res = [
      {
       Wert: "Apple",
       Preis: "13,25",
      },
      {
       Wert: "Apple 1",
       Preis: "13,25",
      },
      {
       Wert: "Apple 2",
       Preis: "13,25",
      },
      {
       Wert: "Apple 3",
       Preis: "13,25",
      },
      {
       Wert: "Apple 4",
       Preis: "13,25",
      },
      {
       Wert: "Apple 5",
       Preis: "13,25",
      },
      
     ];
     res.fürEach((Element) => {
      // Datenbank durchlaufen und das vom Benutzer eingegebene Wort mit jedem Element in der Datenbank vergleichen // if (item.value.indexOf(queryString) == 0) { // gleich 0 und beginnt mit etwas if (item.value.indexOf(queryString) > -1) { // größer als -1, solange es enthalten ist, spielt die Position keine Rolle // Wenn zugehörige Daten vorhanden sind callBackArr.push(item); // in callBackArr speichern und für Rückgabe und Präsentation vorbereiten }
     });
     // Wenn das Array nach dieser Welle von Abfragevorgängen immer noch leer ist, bedeutet dies, dass keine zugehörigen Daten gefunden wurden. Dem Benutzer wird direkt zurückgegeben, dass keine Daten vorhanden sind, wenn (callBackArr.length == 0) {
      cb([{ value: "Keine Daten", price: "Keine Daten" }]);
     }
     // Wenn nach dieser Welle von Abfrageoperationen Daten gefunden werden, wird dem Benutzer das Array callBackArr mit den zugehörigen Daten angezeigt, sonst {
      cb(RückrufArr);
     }
    }, 1000);
   }
  },
  // Klicken Sie auf die Person, die in handleSelect(item) { eingefügt ist.
   diese.frucht = []
   this.fruit.push(Artikel)
  },
 },
};
</Skript>