小程序搜索框简单的实现

来源:csdn博客 分类: 文章浏览史 发布时间:2020-08-29 21:07:31 最后更新:2020-08-29 浏览:87
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-08-29 21:07:31


  • 我们先来看看小程序的官方文档

现附上小程序官网链接https://developers.weixin.qq.com/miniprogram/dev/index.html
在搜索框中输入input(点击即可查看哟)
你会发现很长很长的说明,对于很多初学者来说根本无从下手,咳咳,其实我也是小白,只是最近在负责一些小项目,也踩了一些坑,在这里和大家分享一下,哈哈哈哈哈.

上图
这里写图片描述这里写图片描述这里写图片描述
这里写图片描述
首先我们得有一个思路,在搜索框输入关键词,点击搜索按钮,进行搜索,当我们点击搜索时,会向服务器请求数据,那么,我们的思路是,我们输入的关键词与数据库数据进行匹配,如果有,则被调用出来
我们先把搜索框的基本样式给实现了,我们先建一个
search.wxml
 <!--  搜索框  -->
        <view class='search'>
            <input type='text' placeholder='输入你想要的内容' confirm-type='search' value="{{inputValue}}" bindinput='inputBind' bindconfirm='query'></input>
            <image class="" src='/picture/search.png' bindtap='query'></image>
        </view>

然后建一个

search.wxss
/* 搜索框样式 */
.search
{
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  align-items: center;
  width:70%;
  height:60rpx;
  background-color:whitesmoke;
  margin-top: 5%;
  border:1rpx solid whitesmoke;
  border-radius: 5rpx;

}

/* 搜索框提示文字样式 */
.search input
{
  font-size:27rpx;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding-left:30rpx; 
}

/* 搜索框小图标 */
.search image
{ 
  width:40rpx;
  height:40rpx;
  padding-right:20rpx;
}

最后建一个

search.js
page({
/**
* 页面的初始数据
*/
data:{
    inputValue: '', //搜索的内容
},

    //搜索框文本内容显示
    inputBind: function(event) {
        this.setData({
            inputValue: event.detail.value
        })
        console.log('bindInput' + this.data.inputValue)

    },
     /**
     * 搜索执行按钮
     */
    query: function(event) {

        var that = this

        /**
         * 提问帖子搜索API
         * keyword string 搜索关键词 ; 这里是 this.data.inputValue
         * start int 分页起始值 ; 这里是 0
         */
        wx.request({
            url: 'https://localhost/proj_online_class/server/public/index.php/forum/forum/get_issue_search/' + this.data.inputValue + /0/,
            data: {
                inputValue: this.data.inputValue
            },
            method: 'GET',
            success: function(res) {
                console.log(res.data)
                var searchData = res.data
                that.setData({
                    searchData
                })

                /**
                 * 把 从get_issue_searchAPI 
                 * 获取 提问帖子搜索 的数据 设置缓存
                 */
                wx.setStorage({
                    key: 'searchLists',
                    data: {
                        searchLists: res.data
                    }
                })

                /**
                 * 设置 模糊搜索
                 */
                if (!that.data.inputValue) {
                    //没有搜索词 友情提示
                    wx.showToast({
                        title: '请重新输入',
                        image: '../../picture/tear.png',
                        duration: 2000,
                    })
                } else if (searchData.search.length == 0) {
                    //搜索词不存在 友情提示
                    wx.showToast({
                        title: '关键词不存在',
                        image: '../../picture/tear.png',
                        duration: 2000,
                    })
                } else {
                    //提取题目关键字 与搜索词进行匹配
                    var searchIndex = searchData.search.length
                    var d = 0;
                    for (var i = 0; i <= searchIndex - 1; i++) {

                        var searchTitle = searchData.search[d].title
                        console.log(searchTitle)
                        d = d + 1;

                        for (var x = 0; x <= searchTitle.length; x++) {
                            for (var y = 0; y <= searchTitle.length; y++) {
                                var keyWord = searchTitle.substring(x, y);
                                console.log(keyWord)
                            }
                        }

                        /**
                         * 根据关键词 跳转到 search搜索页面
                         */
                        wx.navigateTo({
                            url: '../search/search',
                        })
                    }
                }



            }
        })
    }
})

这里写图片描述
文档中说可以替换输入的内容,那么我们来试一试,实践出珍珠嘛,哈哈哈,我们给它绑定一个事件,如图
这里写图片描述这里写图片描述
把inputValue的值注册到date里面,如图
这里写图片描述
然后在把inputValue值给绑定在search.wxml,如图
这里写图片描述
注意,数据绑定得用“{{ }}”哟·,这一点是不是很Vue很像,哈哈哈,我也是刚学Vue
把内容输入进去后,是不是要点击搜索呀,我们很自然就想到需要一个按钮,我们把 bindconfirm=”query” 但它不是一个按钮,我之前老是点它没反应,哈哈哈,那它是干什么的呢,如图
这里写图片描述
原来它是点击完成时触发输入到搜索框的,soga,然后捏,然后就没有然后了,哈哈哈哈,不存在的,我们现在还缺一个按钮呀,我们就给它一个按钮用来点击搜索,我又想实现点击触发,我们该咋办捏,嘻嘻,可以通过中介,嘻嘻嘻,我们绑定一个按钮,如图
这里写图片描述
这个中介就是“query”啦,当我们点击时也可以触发bindconfirm啦这里,当然这里绑定按钮还可以选择catchtap=”query”,bindtap和catchtap有什么区别,前者是冒泡,后者是非冒泡,至于什么是冒泡和非冒泡,哈哈,我就不在这累述啦,感觉我好啰嗦,啊哈哈
当然,bindtap=”query”,点击,肯定得向服务器请求呀,所以在search.js中有
这里写图片描述
wx.request({})即向服务器请求的函数呐,把你的API写在url上,把你的搜索关键字写在data上,然后就万事大吉啦
可能这里写得比较绕,如图
这里写图片描述
首先说明,我也是个小白,所以写得并不好,我相信肯定有比这更好的写法,这段代码的意思是,把title给遍历一遍,然后与搜索词匹配
至于search是什么,是我填写在API的返回值呐,如图
这里写图片描述
好了,关于小程序的搜索大概就讲这么多啦

php技术微信