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

Implementation of MYSQL (telephone number, ID card) data desensitization

1. Data desensitization explanation In daily deve...

React implements the expansion and collapse function of complex search forms

Give time time and let the past go. In the previo...

More popular and creative dark background web design examples

Dark background style page design is very popular...

How to configure /var/log/messages in Ubuntu system log

1. Problem Description Today I need to check the ...

Detailed explanation of important cascading concepts in CSS

Recently, I encountered a problem in the process ...

Example method of viewing IP in Linux

Knowing the IP address of a device is important w...

How to optimize images to improve website performance

Table of contents Overview What is Image Compress...

Summarize the problems encountered in using Vue Element UI

Table of contents 1. DateTimePicker date selectio...

Detailed tutorial on installing MySQL 8.0.20 database on CentOS 7

Related reading: MySQL8.0.20 installation tutoria...

jQuery realizes the shuttle box function

This article example shares the specific code of ...

Detailed explanation of downloading, installing and using nginx server

download http://nginx.org/en/download.html Unzip ...

Simple encapsulation of axios and example code for use

Preface Recently, when I was building a project, ...

Example of how to embed H5 in WeChat applet webView

Preface WeChat Mini Programs provide new open cap...

Detailed troubleshooting of docker.service startup errors

Execute the following command to report an error ...