WeChat applet implements search function and jumps to search results page

WeChat applet implements search function and jumps to search results page

Search Page:

search.wxml page:

    <view class="form">
      <input class="searchInput" value='{{keyWord}}' bindconfirm='goSearch' placeholder="Please enter the search keyword" type="text" />
    </view>

search.wxss style:

.form {
  position: relative;
  height: 40px;
}
 
.searchInput {
  border: 1px solid #2c3036;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  border-radius: 20px;
  color: #bebec4;
  padding-left: 35px;
}

search.js:

  // SearchgoSearch: function(e) {
    var that = this;
    var formData = e.detail.value;
    if (formData) {
 
      wx.request({
 
        url: 'https://xxxxx/homepage/search',
        data: {
          title: formData
        },
 
        header: {
          'Content-Type': 'application/json'
        },
        success: function(res) {
          that.setData({
            search: res.data,
          })
          if (res.data.msg=='No related video'){
            wx.showToast({
              title: 'No related videos',
              icon: 'none',
              duration: 1500
            })
          }else{
            let str = JSON.stringify(res.data.result.data);
            wx.navigateTo({
              url: '../searchShow/searchShow?data=' + str
            })
          }
          
          // console.log(res.data.msg)
        }
      })
    } else {
 
      wx.showToast({
        title: 'Input cannot be empty',
        icon: 'none',
        duration: 1500
      })
 
    }
  }

Search results:

searchShow.wxml page:

<view class="container">
  <view class="listBox" wx:for="{{searchShow}}" wx:key="{{item.id}}">
    <view class="listMain">
      <navigator url='../videoShow/videoShow?id={{item.id}}'>
        <image src="{{item.image}}" mode="widthFix"></image>
        <view class='listTitle'>
          <view class="listSubtitle">
            <text>{{item.title}}</text>
          </view>
          <view class="listText">
            <text>{{item.decription}}</text>
          </view>
        </view>
      </navigator>
    </view>
  </view>
</view>

searchShow.js

  onLoad: function(options) {
    let searchShow = JSON.parse(options.data);
    let that = this
    that.setData({
      searchShow: searchShow
    })
    console.log(searchShow)
  },

This is the end of this article about how to implement the search function and jump to the search results page in WeChat mini-programs. For more related mini-programs to implement search and jump content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • WeChat applet implements search box function
  • Sample code for highlighting search keywords in WeChat mini program
  • WeChat applet search box style and jump to the search page (applet search function)
  • WeChat applet development search function implementation (front end + back end + database)
  • How to implement the drop-down box search function in WeChat applet
  • Mini Program implements search interface Mini Program implements recommended search list effect
  • WeChat applet enables searching for food and hotels around designated attractions

<<:  CSS optimization skills self-practice experience

>>:  Why is the disk space still occupied after deleting table data in MySQL?

Recommend

SQL-based query statements

Table of contents 1. Basic SELECT statement 1. Qu...

Getting Started with Vue 3.0 Custom Directives

Table of contents 1. Custom instructions 1. Regis...

Detailed explanation of CSS style cascading rules

CSS style rule syntax style is the basic unit of ...

Solution to the problem of insufficient storage resource pool of Docker server

Table of contents 1. Problem Description 2. Probl...

HTML tags list and usage instructions

List of HTML tags mark type Name or meaning effec...

How to prevent hyperlink redirection using JavaScript (multiple ways of writing)

Through JavaScript, we can prevent hyperlinks fro...

MySQL data type selection principles

Table of contents Small but beautiful Keep it sim...

Comprehensive summary of MYSQL tables

Table of contents 1. Create a table 1.1. Basic sy...

Mysql error: Too many connections solution

MySQL database too many connections This error ob...

HTML meta usage examples

Example Usage Copy code The code is as follows: &l...

MYSQL master-slave replication knowledge points summary

An optimization solution when a single MYSQL serv...

Detailed explanation on how to deploy H5 games to nginx server

On the road to self-learning game development, th...