在每个小程序开发的过程中，基本上都会配备有搜索功能，那么相对智能化的搜索功能是如何实现的呢，通过一段时间的学习，我已经学会比较全面的搜索框功能，来一起看看吧！
开发准备
效果展示
先来看看效果
前期准备
实现
在目录下面新建三个pages
首先我们先来看看搜索框第一个页面index的布局，这里主要介绍搜索框的内容，下面的其他内容就不在这儿赘述了
这是index.wxml代码
<view class=search_1 bindtap=gotoSearch>
<van-search
placeholder=搜索单品 disabled
/>
</view>
<view class=search_2>
<view class=pic bindtap=list >
<image src=></image>
</view>
</view>
</view>
<view class=dewu-search>
<view class=return >
<view class=return_pic bindtap=gotoindex>
<image src=></image>
</view>
<view class=txt>搜索</view>
</view>
</view>
<van-search
value={{value}}
show-action
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>
<view class=last>
<view class=content>搜索历史</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>js里面首先要引入云数据库里的数据
const db = wx.cloud.database();
const dewuCollection = db.collection('dewu');要做到输入框发生改变时，弹出相关的内容，则需要两个page，当输入框有内容输入时，把隐藏的页面显示出来hidden={{issuggest==false?'hidden':''}}来判断是否要出现相关内容页面，
用indexOf判断e.detail（输入框内容）是否是在云数据库里存在的，如果是存在的，那么将这条数据存入一个数组里面，并且连接之前搜索后的数组，再使用 wx.setStorageSync();将输入框的数据存入到storage里面，然后再wx.getStorageSync()提取数据。
这是当输入框有数据的时候就会弹出详情页面，点击可以跳转到商品的详情页
这是搜索框的逻辑
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,'要存进去的数据');
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
})
},
wx.navigateto可以用来跳转到详细的页面，加上字符串模板，判断id的值，用数据来驱动页面，跳转到相同的页面不同的数据。
wx.navigateto({ url: `../hotsearch/hotsearch?id=`+id })
最后还要更新数据
wx.showLoading({
title: '数据加载中...',
})
setTimeout(()=>{
wx.hideLoading()
this.setData({
goodsNav: nav,
goodsList:List,
recommend:List,
goods2:this.data.historyList
})
},1000)
// console.log(goodsList,'===========');
},注意不要忘记要在全局json或者局部页面json里引入需要使用的组件的地址
usingComponents: {
van-search:./miniprogram_npm/@vant/weapp/search/index
},扩展
这是wxml代码 最主要的是 scroll-x=true 让导航栏在水平方向可以滑动scroll-with-animation=true是让滑动产生动画，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>这是绑定在导航栏上面的事件 let {index, type} = e.currentTarget.dataset;提取到 index 和 type ，然后设置一个count作为前几个不动，然后拼接给id，把id的值传给scrollTop，让导航栏跳到scrollTop这个值，这个值就是在中间
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);//拼接id
if(count == 2 && index1 < 3 || count == 3 && index1 < 2 || count == 4 && index1 < 3){
id = item0;
}
console.log(下标,index1,---分类id名称,id)
this.setData({
scrollTop: id
})
},这样再加上wxss后就可以达到效果了 不过这样的写有一个问题，就是当显示的内容为偶数时，如6，则不能正确的跳到正中间，会跳到3的位置，那样就有一点儿偏差，这个问题我暂时还没有解决，不知道有没有大佬知道这个怎么解决呢？
源码
这里有项目完整的源码，上面给出的是部分代码，如果有感兴趣的可以去看看完整源码
https://gitee.com/xinccc/fullstack_huoshan/tree/master/wxapp/dewu
总结
这是我第一次写一次稍微完整的项目，这里主要介绍了我在开发过程中遇到的主要困难，虽然总体来说没有什么难点，但是对我来说还是意义挺大的，有了一次这样的经历，让我发现了我还有很多内容需要学习，也感谢在我有困难时帮我指点迷津的老师和同学,如果你感觉这篇文章有get到你的地方，不妨给我点个赞，这将为我莫大的鼓励，各位大佬如果有什么指点的话，希望可以在评论区一起探讨学习。
更多编程相关知识，请访问：编程入门！！
原文地址：https://www.jb51.cc/weapp/1201284.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
