精华内容
下载资源
问答
  • 微信小程序搜索功能!附:小程序前端+PHP后端

    万次阅读 多人点赞 2019-02-27 21:06:06
    微信小程序已经是非常火了,而且学习也比较容易,但是对于初学者来说还是一件比较伤脑筋的事,接下来给大家分享一下小程序搜索的思路。 流程 1、表单(输入框、提交按钮、提交的name值) 2、接收表单数据(js获取...

    开发需求

    微信小程序已经是非常火了,而且学习也比较容易,但是对于初学者来说还是一件比较伤脑筋的事,接下来给大家分享一下小程序搜索的思路。

    流程

    1、表单(输入框、提交按钮、提交的name值)
    2、接收表单数据(js获取表单name=keyword的值)
    3、通过wx.request向服务器后端发起请求查询数据库
    4、返回JSON格式的数据给小程序,js解析渲染到小程序前端展示

    界面

    代码

    index.wxml

    <!-- 标题 -->
    <view class="title">小程序搜索</view>
    
    <!-- 搜索框view -->
    <view class="search_con">
    
    <!-- 表单 -->
      <form bindsubmit="formSubmit">
      <!-- 记得设置name值,这样JS才能接收name=keyword的值 -->
        <input type="text" name="keyword" class="search_input" placeholder='你要找什么呢?'/>
        <button formType="submit" class="search_btn">搜索</button>    
      </form>
    </view>
    
    <!-- 搜索结果展示 -->
    <view wx:for="{{re}}" wx:key="re" class="search_result">
    <!-- 当提交空白表单的时候 -->
      <view class="empty">{{item.empty}}</view>
      <!-- 当有搜索结果的时候 -->
      <view class="resname">{{item.resname}}</view>
      <!-- 当查询不到结果的时候 -->
      <view class="noresult">{{item.noresult}}</view>
    </view>

    index.js
    其中里面的
    http://localhost/search.php?keyword=
    是服务器后端接口,用于接收小程序传过去的关键词的,下面会有这个后端PHP文件。

    const app = getApp()
    Page({
      data: {},
    
      //执行点击事件
      formSubmit: function (e) {
    
        //声明当天执行的
        var that = this;
    
        //获取表单所有name=keyword的值
        var formData = e.detail.value.keyword;
    
        //显示搜索中的提示
        wx.showLoading({
          title: '搜索中',
          icon: 'loading'
        })
    
        //向搜索后端服务器发起请求
        wx.request({
    
          //URL
          url: 'http://localhost/search.php?keyword=' + formData,
    
          //发送的数据
          data: formData,
    
          //请求的数据时JSON格式
          header: {
            'Content-Type':'application/json'
          },
    
          //请求成功
          success: function (res) {
    
            //控制台打印(开发调试用)
            console.log(res.data)
    
            //把所有结果存进一个名为re的数组
            that.setData({
              re: res.data,
            })
    
            //搜索成功后,隐藏搜索中的提示
            wx.hideLoading();
          }
        })
      },
    })

    index.wxss

    /* 搜索样式 */
    .title{
      text-align: center;
      font-size: 20px;
      font-weight: bold;
    }
    
    
    .search_con{
      width: 80%;
      margin:20px auto;
    }
    
    .search_con .search_input{
      border: 1px solid rgb(214, 211, 211);
      height: 45px;
      border-radius: 100px;
      font-size: 17px;
      padding-left: 15px;/*此处要用padding-left才可以把光标往右移动15像素,不可以用text-indent*/
      color: #333;
    }
    
    .search_con .search_btn{
      margin-top: 15px;
      width: 100%;
      height: 45px;
      background: #56b273;
      color: #fff;
      border-radius: 100px;
    }
    
    .search_result{
      width: 80%;
      margin:10px auto;
    }
    
    
    .search_result .empty{
      text-align: center;
      color: #f00;
      font-size: 15px;
    }
    
    .search_result .noresult{
      text-align: center;
      color: #666;
      font-size: 15px;
    }
    
    .search_result .resname{
      text-align: left;
      color: #333;
      font-size: 15px;
    }

    服务端

    search.php

    <?php
    header('Content-Type:application/json');
    
    //获取表单数据
    $keyword1 = $_GET["keyword"];
    
    //过滤表单空格
    $keyword2 = trim($keyword1);
    
    //当表单提交空白数据时
    if(empty($keyword2)){
        
        //构建数组
        $arr = array(
                "empty" => "表单不能为空"
            );
    
        //把数组转换为json
        $data = json_encode($arr);
        echo "[$data]";
    
    }else{
    
    //过滤表单特殊字符
    $replace = array('!','@','#','$','%','^','&','*','(',')','_','-','+','=','{','}','[',']',';',':','"','<','>','?','/','|');
    $keyword3 = str_replace($replace, '', $keyword2);
    
    // 连接数据库
    $con = mysql_connect("数据库地址","数据库账号","数据库密码");
    if (!$con){die('Could not connect: ' . mysql_error());}
    
    mysql_select_db("数据库名", $con);
    mysql_query("SET NAMES UTF8");
    
    //查询数据库
    $result = mysql_query("SELECT * FROM 表名 WHERE 需要查询的字段 like '%$keyword3%' ORDER BY ID DESC");
    $results = array();
    //查询数据库是否存在这条记录
    $exist = mysql_num_rows($result);
    if ($exist) {
        //遍历输出
        while ($row = mysql_fetch_assoc($result)){
            $results[] = $row;
            }
    
        //输出JSON
        echo json_encode($results);
    
        //当查询无结果的时候
        }else{
    
            //构建数组
            $arr = array(
                "noresult" => "暂无结果"
            );
    
            //把数组转换为json
            $data = json_encode($arr);
            echo "[$data]";
    }
    
    //断开数据库连接
    mysql_close($con);
    }
    ?>

    服务端也是非常简单的,大家自己把服务端写好一点,毕竟安全和效率是很重要的。

    演示

     

    作者:TANKING

    网站:http://likeyunba.com

    学习交流微信:face6009

    (学习交流可以加我)

    另外,本人喜欢研究支付,如果想要了解支付接口,微信支付,支付宝的个人免签约支付接口方案,可以看看我这个:

    http://www.likeyunba.com/pay/

    展开全文
  • 正在做一个微信小程序,想添加一个搜索功能,该怎么实现呢?搜索的内容要放到数据库里吗?最好有个案例学习学习。
  • 【详细】小程序搜索功能实现

    千次阅读 2020-07-20 20:53:13
    搜索功能是app,小程序中非常常见的一个需求,作为常见的需求,如何高效地完成该需求的实现,就异常关键。那么小程序中如何从0到1实现搜索功能呢?请看本文 搜索页wxml <searchbar bindsearchinput=...

    搜索功能是app,小程序中非常常见的一个需求,作为常见的需求,如何高效地完成该需求的实现,就异常关键。那么小程序中如何从0到1实现搜索功能呢?请看本文

    效果展示

    历史记录

    跳转到详情页面(详情页面开发链接https://blog.csdn.net/m0_37218227/article/details/107297203 )

     

     

    搜索页wxml

    <searchbar bindsearchinput="onSearchInputEvent"></searchbar>
    
    <view class='history-list-group' wx:if="{{histories && !subjects}}">
      <view class='history-title'>
        <view class='title'>历史记录</view>
        <view class='clear' bindtap="onClearEvent">清除</view>
      </view>
      <navigator wx:for="{{histories}}" wx:key="{{item.id}}" url='/pages/detail/detail?type=movie&id={{item.id}}' class='history-group'>{{item.title}}</navigator>
    </view>
    
    <view class='item-list-group'>
      <view wx:for="{{subjects}}" class='item-group' wx:key="{{item.id}}" bindtap="onItemTapEvent" data-id="{{item.id}}" data-title="{{item.title}}">
        <image src='{{item.pic.normal}}' class='thumbnail'></image>
        <view class='info-group'>
          <view class='title'>{{item.title}}</view>
          <view class='rate-year'>{{item.rating.value}}分/{{item.year}}</view>
        </view>
      </view>
    </view>

    搜索页wxss

    .item-list-group{
      padding: 10rpx 20rpx;
    }
    
    .item-list-group .item-group{
      padding: 10rpx 0;
      border-bottom: 1px solid #e4e4e4;
      display: flex;
    }
    
    .item-group .thumbnail{
      width: 80rpx;
      height: 100rpx;
      margin-right: 20rpx;
    }
    
    .item-group .info-group{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    .info-group .title{
      font-size: 32rpx;
    }
    
    .info-group .rate-year{
      font-size: 28rpx;
      color: #7b7b7b;
    }
    
    .history-list-group{
      padding: 10rpx 20rpx;
    }
    
    .history-list-group .history-title{
      display: flex;
      justify-content: space-between;
      padding: 20rpx 0;
      background: #f9f9f9;
      font-size: 28rpx;
      color: #9e9e9e;
    }
    
    .history-list-group .history-group{
      font-size: 32rpx;
      padding: 20rpx 0;
      border-bottom: 1px solid #e4e4e4;
    }

    js文件

    // pages/search/search.js
    import {network} from "../../utils/network.js";
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var that = this;
        wx.getStorage({
          key: 'searched',
          success: function(res) {
            var data = res.data;
            that.setData({
              histories: data
            })
          },
        })
      },
    
      onSearchInputEvent: function(event){
        var that = this;
        var value = event.detail.value;
        if(!value || value === ""){
          that.setData({
            subjects: null
          });
          return;
        }
        network.getSearch({
          q: value,
          success: function(subjects){
            that.setData({
              subjects: subjects
            })
          }
        })
      },
    
      onItemTapEvent: function(event){
        var that = this;
        var id = event.currentTarget.dataset.id;
        var title = event.currentTarget.dataset.title;
        var histories = that.data.histories;
        var isExisted = false;
        if(histories){
          for(var index=0;index<=histories.length;index++){
            var movie = histories[index];
            if(movie.id === id){
              isExisted = true;
              break;
            }
          }
        }
        if(!isExisted){
          if(!histories){
            histories = [];
          }
          histories.push({title:title,id:id});
          wx.setStorage({
            key: 'searched',
            data: histories,
            success: function () {
              console.log("保存成功!");
            }
          })
        }
        
        wx.navigateTo({
          url: "/pages/detail/detail?type=movie&id="+id,
        });
      },
    
      onClearEvent: function(event){
        wx.removeStorage({
          key: 'searched',
          success: function(res) {
            console.log("删除成功!");
          },
        });
        this.setData({
          histories: null
        });
      }
    })

     

     

    展开全文
  • 小程序搜索功能的实现

    万次阅读 2018-12-28 15:09:41
    搜索页面(receiveCenter.wxss) &lt;view class="search"&gt; &lt;view class="search_arlet"&gt; &lt;icon class="searchcion" size='15' type='search'&...

     搜索页面(receiveCenter.wxss)

     <view class="search">
          <view class="search_arlet">
            <icon class="searchcion" size='15' type='search'></icon>
            <input type='text' disabled placeholder="门点、港区搜索" value="{{store}}" bindtap='searchInput'/>
          </view>
        </view>

    跳转到新建搜索页面 

    data:{
        store:''//新建搜索页面传递过来的值
    }
    // 搜索
      searchInput:function(){
          var that = this
          wx.navigateTo({
            url: baseUrl + api.pageUrl.SEARCH_PAGE_URL + '?id=' + this.data.store
          })
      },

    新建搜索页面search.wxml

    <view class="search">
          <view class="search_arlet">
            <icon class="searchcion" size='15' type='search'></icon>
            <input class="text" focus="{{name_focus}}" placeholder="门点、港区搜索" data-store="{{inputValue}}" value="{{inputValue}}" bindinput='searchInput' bindconfirm="setSearchStorage" />
          </view>
        </view>
        <view class="textSearch">
         <text>空内容搜索为搜索全部</text>
        </view>
      <view class="Search_record_box">
        <view class="Search_record_text">
          <text>历史搜索</text>
          <image bindtap='clearSearchStorage' src='../../../images/delecte.png'></image>
        </view>
        <view class="History-box">
        <view class="History-list" wx:for="{{getSearch}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx" >
          <text wx:if="{{itemName != ''}}" data-text="{{itemName}}" bindtap='this_value'>{{itemName}} </text>
        </view>
        </view>
       </view>
        <modal class="modal" hidden="{{modalHidden}}" bindconfirm="modalChangeConfirm" bindcancel="modalChangeCancel">
          <view class='qingk'>清空浏览记录</view>
        </modal>

     新建搜索页面search.js

     

    data: {
        inputValue: '',//输入的值
        getSearch: [],历史记录
        modalHidden: true,
        name_focus: true,//获取焦点
        keydown_number: 0,//检测input框内是否有内容
        store:''
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        //获取上一页面传递过来的值
        var store = options.id;
        this.setData({
          store: store
        })
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        var getSearch = wx.getStorageSync('searchData');
        var store = this.data.store
        //只显示十条历史记录
        if (getSearch.length < 10) {
          getSearch.push(this.data.inputValue)
        } else {
          getSearch.splice(0, 1)
          getSearch.push(this.data.inputValue)
        }
        this.setData({
          getSearch: getSearch,
          inputValue: store
        })
        console.log('search is onshow')
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
        console.log('search is onHide')
        wx.redirectTo({
          url: '../search/search'
        })
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      },
    //获取输入的值
      searchInput: function (e) {
        this.setData({
          inputValue: e.detail.value
        })
        console.log('bindInput'+this.data.inputValue)  
      }, 
      //点击赋值到input框
      this_value: function (e) {
        this.setData({
          name_focus: true
        })
        let value = e.currentTarget.dataset.text;
        this.setData({
          inputValue: value,
          keydown_number: 1
        })
      },
      //回车搜索
      setSearchStorage:function(e){
        let store = e.currentTarget.dataset.store
        let data;
        let localStorageValue = [];
        //设置一个空数组,把每次输入的值存进去
        判断如果小于等于10就添加进数组,否则就删除下标为零的值
          var searchData = wx.getStorageSync('searchData') || []
        if (searchData.length <= 10){
          searchData.push(this.data.inputValue)
        }else{
          searchData.splice(0, 1)
          searchData.push(this.data.inputValue)
        }
          wx.setStorageSync('searchData', searchData)
          let pages = getCurrentPages();//当前页面
          let prevPage = pages[pages.length - 2];//上一页面
            //把值传入上一搜索主页面
          prevPage.setData({
            store: e.currentTarget.dataset.store,
          });
          wx.navigateBack({
            delta: 1
          })
        // this.onLoad();
      },
      modalChangeConfirm: function () {
        wx.setStorageSync('searchData', [])
        this.setData({
          modalHidden: true
        })
        wx.redirectTo({
          url: '../search/search'
        })
      },
      modalChangeCancel: function () {
        this.setData({
          modalHidden: true
        })
      },
      clearSearchStorage: function () {
        this.setData({
          modalHidden: false
        })
      }
    @import "../receiveCenter.wxss";
    page{
      height: 100%;
    }
    .Search_record_box{
      height:90%;
      background-color: white
    }
    .textSearch{
      font-size: 28rpx;
      color: #898989;
      margin-left: 30rpx;
      padding: 20rpx;
    }
    .Search_record_text{
      width:92%;
      height: 44rpx;
      padding: 15rpx;
      margin: 0px auto
    }
    .Search_record_text>text {
      font-size: 28rpx;
      color: #898989;
    }
    .hot_box_text>text {
      font-size: 28rpx;
      color: #898989;
      margin-left: 20rpx;
    }
    .hot_box_text {
       margin-top: 40rpx;
    }
    .Search_record_text>image {
      width: 44rpx;
      height: 44rpx;
      vertical-align: middle;
      float: right;
      margin-top: 5rpx;
    }
    .History-box{
      width: 100%;
    }
    .History-list {
      width: 90%;
      margin: 10px auto
    }
    .History-list>text {
      height: 65rpx;
      border-radius: 5px;
      background: #f5f5f5;
      max-width: 100%;
      padding-left: 24rpx;
      padding-right: 24rpx;
      line-height: 65rpx;
      font-size: 33rpx;
      color: #393939;
      margin-bottom: 20rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; 
      box-sizing: border-box;
      margin-right: 20rpx;
      float: left;
    }
    .qingk{
      margin-left: 200rpx;
    }

     点击回车时把值传给上一页面,上一页面调用接口把要搜索的值根据接口赋值即可搜索

    历史记录利用wx.getStorageSync(string key)存入,在页面循环显示即可

    展开全文
  • 微信小程序搜索功能实现

    千次阅读 2018-05-15 13:18:24
  • 小程序搜索功能(模糊查询)

    千次阅读 2019-04-19 13:48:07
    功能:在搜索界面,搜索输入的字符,如果有匹配,就会显示出来。 wxml <view class="page"> <view class="page__bd"> <view class="weui-search-bar"> <view class="weui-search-bar_...
  • [微信小程序]搜索功能实现,搜索框样式

    万次阅读 多人点赞 2017-11-28 11:21:11
    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 上效果图: 一:搜索功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 <view class='page_row' bindtap=...
  • 微信小程序语音搜索功能

    千次阅读 2019-04-16 21:55:12
    微信小程序语音搜索功能 功能简介:微信小程序实现语音搜索(模仿微信发送语音功能)按住按钮说话,松开按钮自动识别 主要用到的技术: 1.微信录音api 2.后台调用百度语音实现录音转化成文字返回前端 //...
  • 小程序模糊搜索功能

    千次阅读 2019-02-20 10:28:57
    --搜索--&gt; &lt;view class="searchbox"&gt; &lt;form bindsubmit="formSubmit"&gt; &lt;view class="search"&gt; &lt;image class="...
  • 微信小程序最全搜索功能

    千次阅读 2019-04-23 16:09:48
    微信小程序最全搜索功能 主要功能: 搜索 点击x号清空输入框内容 点击取消返回上一页面 搜索数据为空提示 历史记录 清空历史记录 点击历史记录搜索 点击搜索列表带参数返回上一页面 代码如下: <!--pages/...
  • 小程序云开发实现搜索功能

    千次阅读 2020-05-14 10:46:00
    云开发数据库的模糊搜索,根据记录的字段字符串模糊搜索实现。 代码: 先在app.js初始化: //app.js App({ onLaunch: function () { wx.cloud.init({ env:'school-5k17122' }) }, globalData: { userInfo...
  • 微信小程序如何实现搜索功能

    千次阅读 2020-01-17 11:21:04
    在页面search.wxml中,定义一个input输入框以及搜索的点击按钮,分别为它们绑定点击事件handleInputChange()和handleSearch()的事件,同时在它们的下面定义搜索的列表,代码如下所示: <view class="search-...
  • 微信小程序之区域搜索功能实现

    千次阅读 2019-01-14 15:33:55
    微信小程序“区域搜索功能”及“目标与定位位置距离显示”功能实现介绍(Java版): 总体来说,这两个功能是比较简单的,只是综合开发可能一开始没有头绪,所以记录一下我的实现方式,希望对看到这篇博客的人有所...
  • 微信小程序正则模糊搜索功能实现

    千次阅读 2020-06-16 15:41:47
    微信小程序正则模糊搜索功能实现(云开发) 微信文档关于正则搜索的部分https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/database/db.regexp.html 一、正则搜索关键代码 db....
  • 微信小程序开发实现搜索功能

    万次阅读 2018-06-08 10:53:59
    对于搜索都是会有一些需要的,所以搜索页面还是可以复用的。主页面就是下面这样:   这个页面在pages/components/component2/component2.wxml ...搜索页面中也是有个input搜索框,旁边有个叉号,可以清...
  • 微信小程序使用键盘搜索功能

    千次阅读 2019-07-03 09:36:22
    记录下。 1、name=‘search’;//search内容随便写 ...搜索内容" /> index.js Page({ shop_search_function: function(e){ var value = e.detail.value; console.log("------->"+value); } })
  • 微信小程序开发搜索功能(前端+后端+数据库)

    万次阅读 多人点赞 2018-05-24 14:00:19
    2019年5月7日更新 这是写的最新的一篇文章 ... 界面比较丑,主要实现逻辑... ...超级简单的界面,表单,提交按钮,搜索结果展示区域... 下面是index.wxml <!--index.wxml--> <form b...
  • 微信小程序搜索分页功能实现

    千次阅读 多人点赞 2019-01-17 17:06:25
    1.这里以搜索歌曲为例: 前端: &lt;view class="search"&gt; &lt;view class="search-bar"&gt; &lt;view class="search-wrap"&gt; &lt;...
  • 微信小程序的开发之搜索功能

    万次阅读 2018-06-15 10:52:59
    "请输入搜索内容" value = " {{ wxSearchData }} " bindinput = "wxSearchInput" bindconfirm = "wxSearchConfirm" /> < view class = "weui-icon-clear" wx:if = " {{ wxSearchData.value.length > ...
  • 之前页面设计搜索框都带有搜索按钮进行搜索,没有用过 enter 进行搜索的路过,原谅我不知道还有这个功能。这里主要介绍 不带搜索按钮的输入框,通过点击 enter 间进行搜索。 HTML: &lt;view class="df ...
  • 微信小程序之"搜索历史"功能实现

    千次阅读 热门讨论 2017-09-26 10:14:37
    微信小程序搜索框之搜索历史功能实现(详解)
  • 小程序 下拉刷新和搜索功能
  • 微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 示例图: 展示所有城市的数据,可实现模糊搜索。 先上代码 <view class="page"> <view class="closeLocation" bindtap="go...
  • 小程序搜索不到?

    万次阅读 2017-12-17 21:38:26
    一、问题描述 ...小程序开发官方社区,也有很多人反馈小程序发布了,但是搜索不到问题。其实不是搜索不到,而是还没“搜索”呢。 后来无意中发现键盘区域有个“搜索”按钮,点搜索,结果出来了,如下图所示:
  • 微信小程序返回功能

    万次阅读 2017-05-09 15:04:15
    微信小程序返回功能
  • 功能:在搜索界面,搜索输入的字符,如果有匹配,就会显示出来。 wxml <view class="page"> <view class="page__bd"> <view class="weui-search-bar"> <view class="weui-search-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 491,129
精华内容 196,451
关键字:

小程序搜索功能