So implementieren Sie die Dropdown-Menüfunktion des WeChat-Applet-Suchfelds in PHP

PHP So implementieren Sie die Dropdown-Menüfunktion des WeChat-Miniprogramm-Suchfelds

Mit der Popularität von WeChat-Miniprogrammen beginnen immer mehr Unternehmen, WeChat-Miniprogramme für z -Handel, Vertrieb und Marketing. Das Suchfeld ist eine sehr wichtige Komponente im WeChat-Applet, mit der Benutzer schnell die benötigten Produkte und Informationen finden können. Mit der Dropdown-Menüfunktion können Benutzer Suchergebnisse bequemer filtern. In diesem Artikel wird erläutert, wie Sie mit PHP die Dropdown-Menüfunktion des WeChat-Applet-Suchfelds implementieren.

1. Konfigurieren Sie die WeChat-Applet-Entwicklungsumgebung

Bevor wir mit der Implementierung der Dropdown-Menüfunktion des WeChat-Applet-Suchfelds beginnen, müssen wir Folgendes vornehmen Stellen Sie sicher, dass wir die WeChat-Entwicklungsumgebung für kleine Programme konfiguriert haben. Spezifische Konfigurationsschritte finden Sie in der offiziellen WeChat-Dokumentation und werden hier nicht wiederholt.

2. Implementieren Sie die Dropdown-Menüfunktion des Suchfelds. Um die Suche für die Box-Dropdown-Menüfunktion zu implementieren, müssen wir zunächst die Suchschlüsselwörter aus der Datenbank abrufen. Hier können wir die mysqli-Erweiterung von PHP verwenden, um eine Verbindung zur Datenbank herzustellen und mithilfe von SELECT-Anweisungen Daten aus der Tabelle abzurufen.

Das Folgende ist der Beispielcode:

1. $mysqli = new mysqli("localhost", "username", "password", "database");
   
   if ($mysqli->connect_errno) {
       echo "Failed to connect to MySQL: " . $mysqli->connect_error;
       exit();
   }
   
   $query = "SELECT keyword FROM search_table";
   $result = $mysqli->query($query);
   
   $keywords = array();
   
   while ($row = $result->fetch_assoc()) {
       $keywords[] = $row["keyword"];
   }
   
   $mysqli->close();

Im obigen Code stellen wir eine Verbindung zur Datenbank mit dem Namen „database“ her und rufen alle Daten aus der Tabelle mit dem Namen „search_table“ ab. Suchbegriffe suchen. Die erhaltenen Suchbegriffe werden in einem Array mit dem Namen „$keywords“ gespeichert.

Suchschlüsselwörter basierend auf Benutzereingaben filtern

Als nächstes müssen wir passende Suchschlüssel basierend auf dem vom Benutzer eingegebenen Wort herausfiltern und geben Sie es an das Applet zurück.

Das Folgende ist ein Beispielcode:

2. $keyword = $_GET["keyword"];
   
   $results = array();
   
   foreach ($keywords as $k) {
       if (strpos($k, $keyword) !== false) {
           $results[] = $k;
       }
   }
   
   echo json_encode($results);

Im obigen Code verwenden wir zuerst $_GET["keyword"], um das vom Benutzer eingegebene Suchwort zu erhalten. Anschließend durchlaufen wir alle Suchbegriffe und ermitteln mit der Funktion strpos, ob die vom Benutzer eingegebenen Schlüsselwörter enthalten sind. Falls enthalten, fügen Sie es dem Ergebnisarray „$results“ hinzu.

Abschließend konvertieren wir das Array „$results“ in das JSON-Format und geben es an den Browser aus.

Dropdown-Menü des Suchfelds im Miniprogramm anzeigen

Jetzt haben wir die Suchbegriffe erhalten, die mit der Benutzereingabe übereinstimmen. Als nächstes müssen wir diese Suchbegriffe im Dropdown-Menü des Suchfelds des Miniprogramms anzeigen.

Das Folgende ist ein Beispielcode:

3. <view class="dropdown" wx:if="{{ showDropdown }}">
       <view class="list" wx:for="{{ dropdownList }}" wx:key="index" bindtap="handleDropdownTap">
           {{ item }}
       </view>
   </view>

Der obige Code definiert eine Ansichtskomponente mit dem Namen „dropdown“ und verwendet die Variablen wx:if und showDropdown, um zu steuern, ob sie angezeigt wird. Wenn die Variable showDropdown true ist, wird das Dropdown-Menü angezeigt.

In der Ansichtskomponente verwenden wir die Variablen wx:for und dropdownList, um jedes Element im Dropdown-Menü in einer Schleife darzustellen und darzustellen, und verwenden bindtap, um das Klickereignis jedes Elements im Dropdown-Menü zu binden Speisekarte.

In der JS-Datei des Miniprogramms können wir die Daten im Dropdown-Menü des Suchfelds abrufen, indem wir die PHP-Schnittstelle aufrufen.

Das Folgende ist der Beispielcode:

onInput: function(e) {
    var keyword = e.detail.value;

    if (keyword.length > 0) {
        wx.request({
            url: "http://localhost/search.php?keyword=" + keyword,
            success: function(res) {
                var list = res.data;

                if (list.length > 0) {
                    this.setData({ 
                        showDropdown: true,
                        dropdownList: list 
                    });
                }
            }.bind(this)
        });
    }
}

Der obige Code definiert eine Ereignisbehandlungsfunktion namens „onInput“ und verwendet e.detail.value, um das Suchfeld des Benutzers abzurufen eingegebene Inhalte.

Wenn die Länge des vom Benutzer eingegebenen Inhalts größer als 0 ist, rufen wir die Methode wx.request auf, um die PHP-Schnittstelle aufzurufen und die Daten im Dropdown-Menü des Suchfelds abzurufen.

Nachdem wir die Daten erfolgreich erhalten haben, setzen wir showDropdown auf true und dropdownList auf die erhaltenen Daten, damit das Dropdown-Menü des Suchfelds angezeigt werden kann.

3. Zusammenfassung

Durch die oben genannten Schritte können wir PHP einfach verwenden, um die Dropdown-Menüfunktion des WeChat-Applet-Suchfelds zu implementieren. Natürlich muss der konkrete Umsetzungsprozess noch an Ihre tatsächlichen Bedürfnisse angepasst und optimiert werden. Ich hoffe, dieser Artikel ist für alle hilfreich. Vielen Dank fürs Lesen.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Dropdown-Menüfunktion des WeChat-Applet-Suchfelds in PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!