Bagaimana untuk melaksanakan fungsi menu lungsur turun kotak carian applet WeChat dalam PHP

Cara melaksanakan fungsi menu drop-down kotak carian program mini WeChat dalam PHP

Dengan populariti program mini WeChat, semakin banyak syarikat mula menggunakan program mini WeChat untuk e-dagang jualan dan pemasaran. Kotak carian ialah komponen yang sangat penting dalam applet WeChat, yang boleh membantu pengguna mencari produk dan maklumat yang mereka perlukan dengan cepat. Fungsi menu lungsur membolehkan pengguna menapis hasil carian dengan lebih mudah. Artikel ini akan memperkenalkan cara menggunakan PHP untuk melaksanakan fungsi menu lungsur turun kotak carian applet WeChat.

1 Konfigurasikan persekitaran pembangunan applet WeChat

Pertama sekali, sebelum mula menggunakan PHP untuk melaksanakan fungsi menu lungsur kotak carian applet WeChat, kami perlu memastikan bahawa kami telah mengkonfigurasi pembangunan persekitaran applet WeChat. Untuk langkah konfigurasi khusus, sila rujuk dokumentasi rasmi WeChat dan tidak akan diulang di sini.

2. Laksanakan fungsi menu lungsur kotak carian

1. Dapatkan kata kunci carian daripada pangkalan data

Untuk melaksanakan kejatuhan kotak carian -fungsi menu bawah, kita perlu terlebih dahulu Dapatkan kata kunci carian daripada pangkalan data. Di sini, kita boleh menggunakan sambungan mysqli PHP untuk menyambung ke pangkalan data dan mendapatkan data daripada jadual menggunakan pernyataan SELECT.

Berikut ialah contoh kod:

$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();

Dalam kod di atas, kami menyambung ke pangkalan data bernama "pangkalan data" dan mendapatkan semua kata kunci carian daripada jadual bernama "search_table" . Kata kunci carian yang diperoleh akan disimpan dalam tatasusunan bernama "$keywords".

2. Tapis kata kunci carian berdasarkan input pengguna

Seterusnya, kita perlu menapis kata kunci carian yang sepadan berdasarkan input pengguna dan mengembalikannya Beri program kecil.

Berikut ialah contoh kod:

$keyword = $_GET["keyword"];

$results = array();

foreach ($keywords as $k) {
    if (strpos($k, $keyword) !== false) {
        $results[] = $k;
    }
}

echo json_encode($results);

Dalam kod di atas, kami mula-mula menggunakan $_GET["kata kunci"] untuk mendapatkan kata kunci carian yang dimasukkan oleh pengguna. Kemudian, kami mengulangi semua kata kunci carian dan menggunakan fungsi strpos untuk menentukan sama ada kata kunci yang dimasukkan oleh pengguna disertakan. Jika disertakan, tambahkannya pada tatasusunan hasil "$results".

Akhir sekali, kami menukar tatasusunan "$results" ke dalam format JSON dan mengeluarkannya kepada penyemak imbas.

3. Paparkan menu lungsur turun kotak carian dalam program mini

Kini, kami telah memperoleh kata kunci carian yang sepadan dengan input pengguna. Seterusnya, kita perlu memaparkan kata kunci carian ini dalam menu lungsur kotak carian program mini.

Berikut ialah contoh kod:

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

Kod di atas mentakrifkan komponen paparan bernama "dropdown" dan menggunakan pembolehubah wx:if dan showDropdown untuk mengawal sama ada ia dipaparkan. Apabila pembolehubah showDropdown adalah benar, menu drop-down akan dipaparkan.

Dalam komponen paparan, kami menggunakan pembolehubah wx:for dan dropdownList untuk menggelung dan memaparkan setiap item dalam menu lungsur turun dan menggunakan bindtap untuk mengikat acara klik setiap item dalam menu lungsur.

Dalam fail JS program mini, kita boleh mendapatkan data dalam menu lungsur kotak carian dengan memanggil antara muka PHP.

Berikut ialah contoh kod:

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)
        });
    }
}

Kod di atas mentakrifkan pengendali acara yang dipanggil "onInput" dan menggunakan e.detail.value untuk mendapatkan perkara yang dimasukkan pengguna dalam kotak carian .

Apabila panjang input kandungan oleh pengguna lebih besar daripada 0, kami memanggil kaedah wx.request untuk memanggil antara muka PHP untuk mendapatkan data dalam menu lungsur turun kotak carian.

Selepas berjaya mendapatkan data, kami menetapkan showDropdown kepada true dan dropdownList kepada data yang diperoleh, supaya menu drop-down kotak carian boleh dipaparkan.

3. Ringkasan

Melalui langkah di atas, kami boleh menggunakan PHP dengan mudah untuk melaksanakan fungsi menu lungsur kotak carian applet WeChat. Sudah tentu, proses pelaksanaan khusus masih perlu diselaraskan dan dioptimumkan mengikut keperluan sebenar anda. Semoga artikel ini bermanfaat kepada semua, terima kasih kerana membaca.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi menu lungsur turun kotak carian applet WeChat dalam PHP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!