小程序搜索框简单的实现

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

现附上小程序官网链接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的返回值呐，如图

好了，关于小程序的搜索大概就讲这么多啦