preface

In the process of each small program development, basically will be equipped with a search function, so the relatively intelligent search function is how to achieve it, through a period of study, I have learned to more comprehensive search box function, let’s have a look!

The development of preparation

  • Wechat applets
  • Have a good vant component library

Results show

Let’s take a look at the effect

preparation

The cloud database imports some data to test the search box function

implementation

Create three pages under the directory

Index is used as the first page of the search box

Search The page used to do a specific search

Hotsearch is a detailed page of search content

First of all, let’s take a look at the layout of the first page index of the search box. Here we mainly introduce the content of the search box, and the rest of the following content will not be described here

This is the index. WXML code

<view class="search_1" bindtap="gotoSearch"> <van-search placeholder=" search "disabled <view class="pic" bindtap="list" > <image src=""></image> </view> </view> </view>Copy the code

This is the search.wxml code for the search box

<view class="dewu-search"> <view class="return" > <view class="return_pic" bindtap="gotoindex"> <image src=""></image> </view> </view> </view> </view> </view> </view> </view> <van-search value="{{value}}" show-action placeholder=" placeholder" bind:clear="onClear" bind:search="onSearch" bind:cancel="oncancel" bind:change="onchange" bindtap="input" value="{{value}}" /> <block wx:if="results.length > 0"> <van-cell wx:for="{{results}}" wx:key="_id" title="{{item.title}}" size="large" /> </block> <view class="page1" hidden="{{issuggest==true? 'Hidden ':''}}" > <view class="bd"> <view class="content"> </view> <view class="box"> <view class="items"> <view class="item" wx:for="{{goods}}" wx:key="index" bindtap="hotsearch" data-id="{{item.id}}" > {{item.hot}} </view> </view> </view> <view class="last"> <view class="content"> Search history </view> <view class="box"> <view class="items"> <view class="item" wx:for="{{historyList}}" wx:key="index" data-id="{{item.id}}" bindtap="gotohistoryList" wx:key="index"> {{item.hot}} </view> </view> </view> </view> </view> <view class="page2" hidden="{{issuggest==false? 'hidden':''}}"> <view class="content1"> <view class="title" wx:for="{{goods1}}" data-id="{{item.id}}" wx:key="index" bindtap="hotsearch" > {{item.hot}} </view> </view> </view> </view>Copy the code

Js inside the first to introduce the cloud database data

    const db = wx.cloud.database();
    const dewuCollection = db.collection('dewu');
Copy the code

{{issuggest==false? Hidden =”{{issuggest==false? ‘Hidden ‘:”}}” to determine if the page should appear, use indexOf to determine if e.dot exists in the cloud database, if so, store this data in an array, and join the previously searched array. Using the wx. SetStorageSync (); Wx.getstoragesync () retrieves the data from the input box into the storage.

When there is data in the input box, the details page will pop up. Click to jump to the details page of the product

This is the logic of the search box

if(e.detail.length! =0){ this.setData({ issuggest:true, }) var arr = []; console.log(this.data.goods.length); for (var i = 0; i < this.data.goods.length; i++) { if (this.data.goods[i].hot.indexOf(e.detail)>=0) { arr.push(this.data.goods[i]); } this.setData({ goods1:arr, }) } } else { console.log('succes'); this.setData({ issuggest:false }) } }, async onSearch(e){ var arr1=new Array(); var historyList=new Array(); var storage=new Array(); for (let i = 0; i < this.data.goods.length; i++){ if(e.detail==this.data.goods[i].hot){ arr1.push(this.data.goods[i]); console.log(arr1); break } else{ arr1.push(e.detail); console.log(arr1); } } if(arr1.length>1){ this.setData({ storage:arr1.slice(arr1.length-1,arr1.length) }) } else{ Console. log(arr1,' data to save '); this.setData({ storage:arr1 }) } if(this.data.historyList ! =[]){ this.data.historyList = this.data.historyList.concat(this.data.storage); } else{this.data.historyList=this.data.storage} wx.setStoragesync ('historyList', this.data.historyList); this.setData({ historyList:this.data.historyList }) },Copy the code

Wx. navigateTo can be used to jump to the detailed page, add string template, judge the value of id, with data to drive the page, jump to the same page different data.

wx.navigateTo({ url: `.. /hotsearch/hotsearch? id=`+id })Copy the code

Finally, update the data

Wx. showLoading({title: 'Data loading... ', }) setTimeout(()=>{ wx.hideLoading() this.setData({ goodsNav: nav, goodsList:List, recommend:List, goods2:this.data.historyList }) },1000) // console.log(goodsList,'==========='); },Copy the code

Don’t forget to include the address of the component you want to use in the global JSON or local page JSON

    "usingComponents": {
        "van-search":"./miniprogram_npm/@vant/weapp/search/index"
  },

Copy the code

extension

This automatic jump to the middle of the navigation bar is also quite common

So this is the WXML code and the main thing is that scroll x=”true” allows the navigation bar to slide horizontally and scroll with animation=”true” allows scrolling to animate, scroll into view=”{{scrollTop}}”

<scroll-view scroll-x="true" scroll-with-animation="true" style="width:100%;" class="scroll-view_H " scroll-into-view="{{scrollTop}}"> <view wx:for="{{goodsNav}}" wx:key="index" id="{{item.id}}" data-index="{{index}}" data-type="{{item.type}}" bindtap="changegoods" class="scroll-view-item_H {{activeNavIndex == index? 'active': ''}} " > <text>{{item.text}}</text> </view> </scroll-view> </view>Copy the code

Let {index, type} = e.currenttarget. dataset; let {index, type} = e.currenttarget. Extract index and type, set a count as the first ones, concatenate to id, pass the value of ID to scrollTop, and make the navigation bar jump to scrollTop, which is in the middle

console.log(e); let {index, type} = e.currentTarget.dataset; console.log("index=" +index, "type="+type); this.setData({ activeNavIndex:index }) if (type == 'recommend') { this.setData({ goodsList: this.data.recommend }) } else { let goods = this.data.recommend.filter((good) => good.camptype == type ) this.setData({ goodsList: goods }) //console.log(this.data.goods) } var index1 = e.currentTarget.dataset.index; var count = 2; var id = "item"+(index1-count); / / stitching id if (count = = 2 && index1 < 3 | | count = = 3 && index1 < 2 | | count = = 4 && index1 < 3) {id = "item0"; } console.log(" subscript ",index1,"-- id ",id) this.setData({scrollTop: id})},Copy the code

So after plus WXSS can achieve the effect Writing has a problem, but this is when the content of the show is even, such as 6, is not correct to jump right in the middle, will jump to the location of the 3, there is a little deviation, so I temporarily haven’t solve this problem, do not know to have bosses know this how to solve?

The source code

Here is the complete source of the project, the above is part of the code, if interested can go to see the complete source

Gitee.com/xinccc/full…

conclusion

This is the first time for me to write a slightly complete project, which mainly introduces the main difficulties I met in the development process. Although there are no difficulties in general, it is of great significance to me. After such an experience, I found that I still have a lot to learn. I would also like to thank the teachers and students who helped me out when I was in trouble. If you feel that this article has reached you, please give me a thumbs-up, which will be a great encouragement for me. If you have any advice, I hope you can discuss and study together in the comments section.