How to realize the search button in the development of WeChat Mini Programs

This article is about how to implement the search button in WeChat Mini Programs's development. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

In the search input, how to click the search button to search and modify the button style

Normally, we would add a search button to the search box and click to search, but Mini Program does not operate dom, so it is impossible to get the value in input directly, so we have to search by other methods.

(1) through the bindconfirm property in the input component (confirm-type= "search" can change the finish button of the soft keyboard to "search")

/ / js part toSearch (e) {console.log (e.detail.value) / / e.detail.value enter the value for the input box}

(2) use the submission of the form form to complete the submission by clicking the button (input needs to add name attribute)

Search button

Use button instead of form form submission (form-type= "submit"). Note that you can't use view, you must use button.

You need to modify the default style of button yourself (the border of button is to be modified in button::after)

/ / wxml part search / / js part formSubmit (e) {console.log (e.detail.value.search) / / is the value of the input box, input remember to add the name attribute} Thank you for reading! This is the end of the article on "how to achieve the search button in WeChat Mini Programs's development". I hope the above content can be of some help to you, so that you can learn more knowledge. If you think the article is good, you can share it for more people to see!