uni-app实现搜索功能
uniapp实现简单的搜索功能
·
一,搭建搜索框架
首先需要写一个输入框
我们在主页上添加一个点击搜索就跳转,同时我们跳转到搜索页面之后 会有一个返回按钮
在搜索栏用v-model="userName"绑定
placeholder--搜索框里面的提示文字。@search--回车或者点击搜索时触发的函数
methods: {
sou () {
uni.navigateTo({
url:'/pages/sousuo/sousuo?username=' + this.userName
}) //由搜索页传递到搜索结果页
uniCloud.database().collection('接口').get().then(res =>{
this.userName = ''
console.log(res);
})
}
在搜索结果页面接收数据
data() {
return {
dataList:[], //展示数据
}
},
//搜索结果页接受
onLoad(value) {
if(!value) return
this.getSearch(value)
},
methods: {
// value自动接收输入框中的内容
getSearch(value) {
//调用接口数据
uniCloud.database().collection('接口').get().then(res => {
this.dataList = res.result.data.filter(item => {
if(item.username == value.username) {
console.log(item.username);
return true
}
)
})
}
模糊查询可用js里的方法 indexOf
getSearch(value) {
uniCloud.database().collection('接口').get().then(res => {
res.result.data.forEach(item => {
if(item.username.indexOf(value.username) > -1) {
this.dataList.push(item)
})
})
}
更多推荐
已为社区贡献1条内容
所有评论(0)