精华内容
下载资源
问答
  • 小程序模糊搜索

    千次阅读 2019-09-10 13:32:06
    //从搜索栏中获取的value作为规则进行匹配。 options : 'i' , //大写不区分 } ) } ) . limit ( 10 ) . get ( { //如果查询成功的话 success : function ( res ) { console . log ( 'log...

    效果

    在这里插入图片描述

    js

      onClickSearchSubmit: function(e){
        console.log("onClickSearchSubmit")
        console.log("result:", e.detail.content)
        var that = this;
        //1、引用数据库
        const db = wx.cloud.database({
          //这个是环境ID不是环境名称
          env: 'xxxxxxxxxxx'
        })
        console.log("dbdb"+db)
        //2、开始查询数据了  news对应的是集合的名称
        db.collection('school').where({
          name: db.RegExp({
            regexp: e.detail.content,
            //从搜索栏中获取的value作为规则进行匹配。
            options: 'i',
            //大小写不区分
          })
        }).limit(10).get({
          //如果查询成功的话
          success: function (res) {
            console.log('log',res.data)
            //这一步很重要,给ne赋值,没有这一步的话,前台就不会显示值
            that.setData({
              ne: res.data
            })
            console.log("aaa"+this.data.ne)
          }
        })
      },
    

    具体效果可见

    在这里插入图片描述

    展开全文
  • 小程序模糊搜索功能

    2020-02-27 15:50:16
    小程序模糊搜索功能 小程序模糊搜索功能,记录一下

    小程序模糊搜索功能
    添加链接描述
    添加链接描述
    小程序模糊搜索功能,记录一下

    展开全文
  • 微信小程序模糊搜索

    2021-03-29 17:15:50
    小功能 小程序模糊搜索 搜索也是小程序常见的一个小功能,此为模糊搜索案例,实际开发中建议传入搜索框内容到后台,后台查询后返回商品列表,以免占用过多资源。 实现功能如下 (1) 未找到商品时显示提示信息,找到...

    小功能 小程序模糊搜索

    搜索也是小程序常见的一个小功能,此为模糊搜索案例,实际开发中建议传入搜索框内容到后台,后台查询后返回商品列表,以免占用过多资源。

    实现功能如下
    (1) 未找到商品时显示提示信息,找到商品时显示商品列表

    (2) 清空搜索框时显示搜索历史记录,历史记录可清除,点击历史记录赋值到搜索框

    view代码如下

    <view class="top">
      <view class="topsearch">
        <view class="frame">
          <input value="{{shoopingtext}}" bindinput="shoppinginput"></input>
        </view>
        <text bindtap="search">搜索</text>
      </view>
    </view>
    <view class="history" wx:if="{{history}}">
      <view class="history_title">
        <text>历史搜索</text>
        <image src="http://photo.weitianxia.cn/uploadhtml5_2021-03-10_6048401a4fff4.png" mode="widthFix" style="width:5%;" bindtap="cleanhistory"></image>
      </view>
      <view class="history_text">
        <text wx:for="{{newArray}}" wx:key="key" data-text="{{item}}" bindtap="textfz">{{item}}</text>
      </view>
    </view>
    <view class="none" wx:if="{{noneview}}">
      <image src="http://photo.weitianxia.cn/uploadhtml5_2021-03-10_60484064e27dc.png" mode="widthFix" style="width:20%"></image>
      <text>抱歉,没有相关商品</text>
    </view>
    
    <view wx:if="{{sea}}" style="margin:7%;">
      <image src="http://photo.weitianxia.cn/uploadhtml5_2020-08-23_5f424f8aa953b.jpeg" mode="widthFix" ></image>
    </view>
    

    wxss 代码如下

    .top {
      width: 100%;
      background-color: #f7f7f7;
    }
     
    .topsearch {
      width: 90%;
      margin-left: 5%;
      display: flex;
      padding: 2% 0;
      align-items: center;
    }
     
    .frame {
      background-color: white;
      width: 75%;
      border-radius: 20rpx;
      padding: 0 3%;
    }
     
    .frame>input {
      font-size: 24rpx;
      margin: 6rpx 0;
    }
     
    .topsearch>text {
      width: 10%;
      margin-left: 5%;
      color: #a8a7a7fa;
    }
     
    .history {
      background-color: white;
      padding: 4%;
    }
     
    .history_title {
      font-size: 30rpx;
      display: flex;
      justify-content: space-between;
      color: #a8a7a7fa;
      align-items: center;
    }
     
    .history_text {
      padding: 4% 0;
      display: flex;
      flex-wrap: wrap;
    }
     
    .history_text>text {
      background-color: #f7f7f7;
      padding: 1% 3%;
      margin: 2%;
      border-radius: 40rpx;
      font-size: 30rpx;
    }
     
    .history_text>text:first-child{
      margin-left: 0;
    }
     
    .none{
      margin-top: 10%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
     
    .swiper_con {
      width: 96%;
      margin-left: 2%;
      display: flex;
      flex-wrap: wrap;
    }
     
    .swiper_con_view {
      width: 48%;
      height: 530rpx;
      background-color: white;
      margin: 10rpx 0;
    }
     
    .swiper_con_view:nth-child(even) {
      margin-left: 4%;
    }
     
    .swiper_con_view_view {
      margin-top: 5%;
      display: flex;
      align-items: center;
    }
    
    

    js 代码如下

    Page({
      data: {
        shoopingtext: "", //搜索框的值
        history: false, //显示历史记录
        noneview: false, //显示未找到提示
        shoppinglist: false, //显示商品列表
        sea: true,
        //title: false,
        historyArray: [], //历史记录数组,
        newArray: [], //添加历史记录数组
        shoopingarray: [{ //商品
          id: 0,
          images: "http://photo.weitianxia.cn/uploadhtml5_2020-08-23_5f424f8aa953b.jpeg",
          title: "夕阳西下",
          money: "88888.00",
          sold: "999包",
          status: 0
        }, {
          id: 1,
          images: "http://photo.weitianxia.cn/uploadhtml5_2020-07-01_5efc5ad706726.jpg",
          title: "三只松鼠",
          money: "99.00",
          sold: "78箱",
          status: 0
        }],
    
       //清除历史记录
       cleanhistory: function(e) {
        this.setData({
          history: false, //隐藏历史记录
          historyArray: [], //清空历史记录数组
          newArray: [],
          shoopingtext: "" //清空搜索框
        })
      },
      //搜索
      search: function(e) {
        var searchtext = this.data.shoopingtext; //搜索框的值
        var sss = true;
        if (searchtext != "") {
          //将搜索框的值赋给历史数组
          this.data.historyArray.push(searchtext);
          //模糊查询 循环查询数组中的title字段
          for (var index in this.data.shoopingarray) {
            var num = this.data.shoopingarray[index].title.indexOf(searchtext);
            let temp = 'shoopingarray[' + index + '].status';
            if (num != -1) { //不匹配的不显示
              this.setData({
                [temp]: 1,
              })
              sss = false //隐藏未找到提示
            }
          }
          this.setData({
            history: false, //隐藏历史记录
            noneview: sss, //隐藏未找到提示
            shoppinglist: true, //显示商品列表
            sea: false, //显示图片
            newArray: this.data.historyArray //给新历史记录数组赋值
          })
        } else {
          this.setData({
            noneview: true, //显示未找到提示
            shoppinglist: false, //隐藏商品列表
            sea: false,
            history: false, //隐藏历史记录
          })
        }
      },
    
    
      //搜索框的值
      shoppinginput: function(e) {
        //当删除input的值为空时
        if (e.detail.value == "") {
          this.setData({
            history: true, //显示历史记录
            shoppinglist: false, //隐藏商品列表
            sea: true,
          });
          //所有商品列表的状态改为0
          for (var index in this.data.shoopingarray) {
            let temp = 'shoopingarray[' + index + '].status';
            this.setData({
              [temp]: 0,
            })
          }
        }
        this.setData({
          shoopingtext: e.detail.value
        })
      },
      //点击历史记录赋值给搜索框
      textfz: function(e) {
        this.setData({
          shoopingtext: e.target.dataset.text
        })
      }
    })
    

    效果如下
    在这里插入图片描述
    未找到商品时显示如下
    在这里插入图片描述
    历史搜索记录显示
    在这里插入图片描述
    搜到到的商品展示
    在这里插入图片描述
    搜索到商品删除后展示
    在这里插入图片描述

    结束~~

    展开全文
  • getValue中300毫秒获取模糊搜索(bindinput="getValue"): setTimeout(()=>{ this.searchTap(); },300) // 获取列表 getFuzzySearchList(kw){ if (!kw) return Promise.reject( false ); ...
      // 词汇联想
    //HTML部分
     <block wx:if="{{fuzzySearchList && inputValue}}">
            <view class="fuzzy_search">
                <view class="item" data-keys="{{item.suggest}}" catchtap="doSearch" wx:key="{{index}}" wx:for="{{fuzzySearchList}}">
                    <view class='oneText'>
                        <text wx:for="{{item.suggest}}" wx:key="{{index}}" class="{{item == inputValue ? 'highlight' : '' }}">{{item}}</text>
                    </view>
                </view>
            </view>
        </block>
    
    

    getValue中300毫秒获取模糊搜索(bindinput="getValue"):

    setTimeout(()=>{
        this.searchTap();
    },300)
        // 获取列表
        getFuzzySearchList(kw){
            if (!kw) return Promise.reject(false);
            return new Promise((resolve,reject)=>{
                const _this = this;
                let param = {
                    key_word: kw
                }
                http({
                    url: api.$api.getFuzzySearch,
                    method: 'GET',
                    data: param,
                    success: function(res) {
                        if(res.data.status == 'T'){
                            _this.setData({
                                fuzzySearchList:res.data.data,
                            })
                            resolve()
                        }
                    },
                });
    
            })
        },
        // 处理高亮显示
        searchTap: function (e) {
            this.getFuzzySearchList(this.data.inputValue).then(()=>{
                // let data, newData;
                // data = newData = this.data.fuzzySearchList
                let data = this.data.fuzzySearchList;
                let newData = this.data.fuzzySearchList;
                for (let i = 0; i < data.length; i++) {
                    let dic = data[i];
                    let newDic = newData[i];
                    let name = dic["suggest"];
                    newDic["suggest"] = getInf(name, this.data.inputValue);
                }
                this.setData({
                    fuzzySearchList: newData,
                })
            })
        },

     

    转载于:https://www.cnblogs.com/vonson/p/10796382.html

    展开全文
  • 日前微信悄然上线了小程序在微信当中的搜索功能,当你在微信的搜索功能当中搜索常用的词汇(例如表情、电影)时在搜索结果当中出现在首位的将是相关的微信小程序,而不是之前所推荐的公众号,当然...
  • 小程序模糊搜索

    2021-04-19 20:40:33
    闲话少说代码参上: filter(e){ this.setData({ value:e.detail.value }) let list1 = this.data.array var arr = []; let value = this.data.value for (var i = 0;... if (list1[i].name.indexOf(value) >...
  • 微信小程序,搜索框模糊搜索,关键字搜索查询。
  • 微信小程序正则模糊搜索功能实现

    千次阅读 2020-06-16 15:41:47
    微信小程序正则模糊搜索功能实现(云开发) 微信文档关于正则搜索的部分https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/database/db.regexp.html 一、正则搜索关键代码 db....
  • 今天来给大家讲讲小程序搜索功能。我这里后台数据库用的是小程序云开发的云数据库。所以我们搜索的时候就要借助云开发来实现。 一,需求 比如我这里有如下的一些数据 我们想实现如下搜索需求 1,搜索标题(title)...
  • 2月15日,微信小程序已经上线已经一个月有余,...近日,微信小程序模糊搜索的功能悄然上线了,不再像过去那样需要输入完整小程序的名称才能搜到,瞬间方便很多。微信小程序的红利入口隐约开始了,还没试过的朋友不妨
  • 微信小程序云开发之模糊搜索

    千次阅读 2020-10-24 17:28:42
    以前在做前后端分离的项目时,要实现一些搜索框的模糊搜索时,运气好一点,后端攻城狮会处理好逻辑,前端只需在输入框的value值发生变化时去调用接口重新渲染...微信小程序云开发之模糊搜索 可以重下面的例子看到 ...
  • 代码说明:模糊查询数据库集合(birthday),模糊匹配查询生日是否为今天 用户的生日日期格式为 1994-07-06 , 当前日期格式为 07-06 , 匹配数据库的月和日,数据库集合如图: 云函数代码: // 云函数入口...
  • 微信小程序模糊搜索功能(云开发)

    千次阅读 多人点赞 2019-07-29 13:40:22
    在此我对微信云开发模糊搜索进行了研究。搜索功能基本就是通过输入关键字查询与之相匹配的内容,并展示在页面上。目前小程序云开发还未提供模糊查询机制,因此我们只有通过正则表达式来完成云开发的模糊查询。 name:...
  • 最近做小程序云开发时,用到了一个数据库的模糊搜索功能,并且是要求多字段的模糊搜索。 网上也有一大堆资源,但是都是单个字段的搜索。如下图 上图只可以实现time字段的模糊搜索。但是我们如果相对数据表里的多个...
  • 时间匆匆而过,微信小程序已经上线一个多月,这一个多月来微信小程序已经逐渐淡出我们的视线,不过微信小程序也在不断改进,今天就加入了一个众望所归的新功能:支持模糊搜索。 由于设定于线下场景扫描进入,小程序...
  • 搜索框搜索的时候,我们想要模糊搜索,关键字查询。 只要有包含搜索框里面的值的话,都会被搜索出来 这种搜索,宁可少输,不可输错。 正文: 演示效果: 关键代码: // 搜索框内容改变事件 inputTyping: ...
  • 比如想要在云数据库中查找Java 相关书籍, 输入java ,书名中有JAVA,xxxjavaxxx,...但是小程序没有提供这种模糊搜索的封装,请问怎么实现 全部查询下来再提取的方式就不要说了,数据量没那么小。
  • 微信小程序源码,前端源码,简单展示源码,原生小程序源码 非uniapp,仅供参考,如有涉及版权问题请联系作者。微信小程序源码,前端源码,简单展示源码,原生小程序源码 非uniapp,仅供参考,如有涉及版权问题请联系...
  • 最近微信小程序需要做个搜索的功能,但是微信小程序的云开发中的数据库的查询语句中没有模糊查询这个功能【小声BB:真垃圾】,神奇的是有正则表达式这个功能,正则表达式提供以下方法 wx.cloud.init() var that=...
  • 转载于:https://my.oschina.net/u/3209681/blog/840232
  • 本系列内容不定期更新我在自学python的过程中收集的小程序,希望能给到刚刚接触python的小伙伴们一些帮助,不积跬步无以至千里,让我们开始吧。 03 文件模糊搜索 问题描述: 假如有一天,你想起你和你女朋友的某...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 399
精华内容 159
关键字:

小程序模糊搜索