Table of contents
In the previous article, we explained the display function of store information. This article explains the search function. Usually mini programs are equipped with a search function on the home page. You can enter keywords to search, and you can make purchases on the results page. At the same time, the user's search terms are also recorded, and frequently occurring words are listed as hot search terms. In order to realize the memory function of search terms, the user's search records need to be recorded in the data source.
1 Create a data source
Open the console, click Data Model, click New
Enter the name hot search terms
Click Edit to add fields
Add the first field hot search words, select text as the type
Add the search times as the second field, select numbers as the type
Add another data source, search history Record
Add the first field search term, type select text
Add the second field openid, type select text
2 Home page search function
We now display the name of the store on the homepage. We want to display the search box to the right of the name. We need to build a layout. First add a normal container, place text components and single-line input components inside, and select the search box for the template (fill )
Select the ordinary container, set the layout, arrange it horizontally, align both ends, and center it vertically
Modify the width of the single-line input and set it to 150
3 Create a search page
Click the icon to create a page to create a search page
Set an event for the single-line input component on the homepage and open the search results page when focused
4 Build the search results page
First put the single-line input component, select the search box for the template
Then put the text component, change the content to popular search
Set the margin of 20
Put the label component
We need to bind the content of the option dynamically. First create a variable and click New in the code area on the left
Select the new micro-data table query
Select hot search words as the data source, and select multiple queries as the method
Set the sorting field and sort in descending order according to the number of searches. Take a total of 5 pieces of data
Bind data to the label item and enter the following expression
$w.hotsearch.data.records.map((item,index)=>{
return {
"label":item.rsc,
"value":item.rsc
}
})
Set a certain margin
Add another ordinary container and place text and icon components inside it
Set the layout of the ordinary container, arrange it horizontally, two Align end to end, center vertically
Modify the text content to historical search, select a delete icon as the icon
Add a label component below
Definition A variable, the data source selects historical search records
Set the query conditions, openid is equal to the openid of the logged in user
Bind a variable to the label item, bind the following expression< /span>
$w.userserach.data.records.map(item=>({
"label":item.ssc,"value":item.ssc}))
Summarize
In this article, we mainly implemented the construction of the search effect. We will not be able to truly realize the specific search effect until the design of our main functions is completed.