How to implement the search box function in WeChat applet with PHP

With the continuous popularity of WeChat mini programs, the search box function has become an indispensable part of many mini programs. It is also becoming more and more important to implement the search box function of WeChat applet in PHP. This article will introduce how to use PHP to implement the search box function in WeChat applet.

1. Get user input

Before implementing the search box function, you first need to get the keywords entered by the user. For this purpose, you can use the search input box component that comes with the WeChat applet to obtain the keywords entered by the user by monitoring its input events. The following is the sample code:

//在wxml文件中
<search-input bind:input="getInput" />

//在相应的js文件中
Page({
  data: {
    keyword: ''
  },
  getInput(e) {
    this.setData({
      keyword: e.detail.value
    })
  }
})

2. Interact with the database

After obtaining the user input, you need to pass it to the PHP backend and then interact with the database for search matching . Here we assume that MySQL is used as the database. The following is the sample code:

//在PHP文件中
<?php
header("Content-Type: text/html; charset=UTF-8");

$keyword = $_POST['keyword'];

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

$sql = "SELECT * FROM table WHERE name LIKE '%".$keyword."%'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo $row["name"]. "<br>";
    }
} else {
    echo "没有搜索到结果。";
}

$conn->close();
?>

In the above code, the keywords entered by the user are first obtained, then the database is connected, and a fuzzy matching search is performed. If a result is found, the result will be output; otherwise, "No result found."

3. Client display data

The last step will be returned from PHP The data is displayed on the WeChat applet client. The following is a sample code:

//在wxml文件中
<scroll-view>
  <view wx:for="{{list}}" wx:key="{{index}}">
    {{item.name}}
  </view>
</scroll-view>

//在相应的js文件中
Page({
  data: {
    list: []
  },
  onLoad() {
    wx.request({
      url: '',
      method: 'POST',
      data: {
        keyword: ''
      },
      success: res => {
        this.setData({
          list: res.data
        })
      }
    })
  }
})

In the above code, we use the scroll view component that comes with the WeChat applet to display the data list returned from PHP. Use the wx.request method to initiate a network request to the PHP backend and pass the keywords entered by the user as data. The data returned by PHP will be saved in the client's list variable in the form of res.data, and will be updated to the client through setData.

To sum up, the above are the steps to use PHP to implement the search box function in the WeChat applet. It should be noted that data security checks should be performed on entered keywords to avoid injection attacks. It is worth mentioning that during the actual development process, factors such as search speed and user experience must also be taken into consideration to make the search function more practical and effective.

The above is the detailed content of How to implement the search box function in WeChat applet with PHP. For more information, please follow other related articles on the PHP Chinese website!