Home>Article>WeChat Applet> Teach you step by step how to implement content search function in mini program
This article will share with you a practical experience in developing a small program and introduce how to implement the content search function in a small program. I hope it will be helpful to everyone!
Previously we implemented the display of the homepage content list, but did not implement the real function of the search box at the top. In this article, we will add a real search to the search box. Function. [Related learning recommendations:小program development tutorial]
Let’s take a look at what it looks like after we click on the search box now
Here, we use vant'ssearch
component, and itsdocumentationintroduces a series of event binding methods for this component.
What we want to use is to trigger the real content search when the search is determined, so we add the binding of this event to thesearch
component As follows
Next, we print the value variable bound to the search component in the response implementation of the search event, and then perform input testing.
handleSearch() { const { searchValue } = this.data console.log('搜索内容', searchValue) }
It should be noted here that in the developer tools, for components such as input boxes, since they are on the computer side, they cannot evoke an input method interface similar to the mobile phone side, so the interaction with the small program on the mobile phone is All real differences.
In this case, we can use the preview function to debug on the mobile phone. After opening the mini program on the mobile phone, you can click...
in the upper right corner to bring up the debugging panel to view the console. Output.
Or use thereal machine debugging
function provided by the developer tools. You can preview the mini program on your mobile phone and see the debugging information in real time in the developer tools on the computer.
After debugging, we found that thevalue
bound tosearch
will only be entered for the first time It is later changed and stored insearchValue
, and the value entered subsequently will not update this variable. This results in us not being able to use the latest entered content for every search, which is a problem.
The solution is also very simple, which is to use the data binding feature that comes with the mini program and add thesearch
component to the The incomingvalue
attribute is changed tomodel:value
, thereby enabling two-way data binding.
In this way, after subsequent input updates, the value ofsearchValue
will be updated at the same time to achieve the effect of synchronous modification.
Then we can get the content entered in the search box each time, and we can use this as a keyword to query the list content.
The rule is to find the records containing our search keywords intext
from all the records in the database. Of course, only 20 records will be returned at a time, and pull-up can also be supported. load.
In fact, the method here is basically the same as the previous method of querying data, except that a keyword matching condition is added on the original basis, so let us transform the previous data query method.
We added the search content as a parameter to the method originally used to refresh the entire list content, and passed it transparently to the cloud function processing method used to actually query the data. At the same time, every time the search box confirms the search, it is judged whether there is search content, and if so, the data is reacquired.
Next, we also need to make corresponding changes to the database data extraction in the cloud function. The database recordwill be used here. Regular matching
method is used to match the search content. For details, please refer to theofficial document
The core logic after the transformation is as follows
const db = cloud.database() const collection = db.collection('homeContentList') let searchPromise let countPromise try { if (content) { const searchReg = db.RegExp({ regexp: content, options: 'i' }) searchPromise = collection.where({ text: searchReg }) .skip(pageNo).limit(pageSize).get() countPromise = collection.where({ text: searchReg }) .count() } else { searchPromise = collection.skip(pageNo).limit(pageSize).get() countPromise = collection.count() } const [{ data: listData }, { total }] = await Promise.all([searchPromise, countPromise]) if (listData) { data = listData } totalSize = total } catch (error) { console.log('error', error) }
We determine whether there is search content , to distinguish whether to perform regular matching in the process of querying data, and ignore the letter case of the search content when there is search content, so as to match as much content as possible.
In this way, we realize the query for the search content.
最后,我们优化一下首页的展示效果。
很多页面都有可能是数据列表的形式,而其各自在加载完所有数据后需要展示在底部的“没有更多内容”字样可能不同,所以我们将这部分展示封装成一个可供复用的自定义组件。
{{text}}
.wrap { width: 100%; padding: 20rpx 0 40rpx; text-align: center; } .text { color: #999; font-size: 26rpx; line-height: 30rpx; }
Component({ properties: { text: { type: String, value: '没有更多内容了' } } })
这篇,我们实现了搜索框功能,将搜索框中输入的内容作为搜索关键字,从而在数据库中查找包含关键字的记录进行展示。另外,我们还将“没有更多内容”封装可供复用的组件。
更多编程相关知识,请访问:编程入门!!
The above is the detailed content of Teach you step by step how to implement content search function in mini program. For more information, please follow other related articles on the PHP Chinese website!