微信小程序搜索（点击关键词搜索）

我上一个教程：点击查看是简单的输入关键词搜索，现在我又写了一个2.0版本的，点击关键词，关键词会出现在搜索框并且自动完成搜索。

动图演示

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" value="{{click}}" placeholder='你要找什么呢？'/><button formType="submit" class="search_btn">搜索</button></form>
</view><!-- 关键词 -->
<view class="kw"><ul><li data-text="文库" bindtouchend='controlurl'>文库</li><li data-text="wifi" bindtouchend='controlurl'>wifi</li><li data-text="绿色" bindtouchend='controlurl'>绿色</li><li data-text="抖音" bindtouchend='controlurl'>抖音</li><li data-text="影视" bindtouchend='controlurl'>影视</li></ul>
</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.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;
}.kw{width: 80%;margin:10px auto;overflow: hidden;
}.kw ul li{padding: 5px 10px;border:1px solid #ccc;font-size: 13px;color: #666;display:inline-block;float:left;margin:0 5px 5px 0;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;
}

index.js

const app = getApp()
Page({data: {},controlurl:function(e){var clickword = e.currentTarget.dataset.text;console.log(clickword)this.setData({click: clickword})//显示搜索中的提示wx.showLoading({title: '搜索中',icon: 'loading'})let that = this;wx.request({url: 'https://www.xxx.xxx/api/xcx_search.php?keyword='+clickword,header: {'content-type': 'application/json' // 默认值},success (res) {console.log(res.data[0].resname)that.setData({re: res.data})//搜索成功后，隐藏搜索中的提示wx.hideLoading();}})
},//执行点击事件formSubmit: function (e) {//声明当天执行的var that = this;//获取表单所有name=keyword的值var formData = e.detail.value.keyword;//显示搜索中的提示wx.showLoading({title: '搜索中',icon: 'loading'})//向搜索后端服务器发起请求wx.request({//URLurl: 'https://www.xxx.xxx/api/xcx_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();}})},
})

xcx_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;}//输出JSONecho json_encode($results);//当查询无结果的时候}else{//构建数组$arr = array("noresult" => "暂无结果");//把数组转换为json$data = json_encode($arr);echo "[$data]";
}//断开数据库连接
mysql_close($con);
}
?>

Author:TANKING

微信小程序搜索（点击关键词搜索）相关推荐

微信小程序实现点击拍照长按录像功能
微信小程序实现点击拍照长按录像功能代码里面注释写的都很详细,直接上代码.官方的组件属性中有触摸开始和触摸结束属性.本功能依靠这些属性实现. .wxml代码: <!-- 相机 pages/cam ...
微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法
微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法参考文章: (1)微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法 (2)https://www.cnblogs.co ...
微信小程序实现点击导航条切换页面
本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码,供大家参考,具体内容如下我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动. 代码解说: 首先我在js自定义了navSta ...
微信小程序进行蓝牙初始化、搜索附近蓝牙设备及连接指定蓝牙（一）
前言: 微信小程序搜索附近蓝牙设备,必须先进行蓝牙初始化,初始化ok进行搜索附近蓝牙设备.连接指定蓝牙需要deviceId(硬件通过at指令可以查看deviceId) 准备工作: 软件:微信小程序硬 ...
微信小程序 map 点击图标回到自己的位置（不使用controls控件）
先上效果图: 原由(必看): 本来微信小程序的map 里面的 controls控件可以轻松实现,但是官方说要废弃了,说采用 cover-view代替,其实就是一个点击事件.用不用cover-view ...
按钮点击_如何设置微信小程序按钮点击事件？
当我们需要点击按钮实现一个操作时,我们应该怎么设置?这里给大家介绍两种方法: 方法一:使用小程序模板,无需懂技术. 这种方法比较简单,你只需要选一个比较简单的小程序模板,比如「上线了」sxl.cn,在 ...
微信开发工具button跳转页面_微信小程序按钮点击跳转页面详解
微信小程序中,按钮也是标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkP ...
微信小程序——绑定点击事件
微信小程序出来了那么长时间了,之前一直准备升学和毕业设计(过段时间我要写一写我的毕业设计),最近马上毕业了,终于有时间来研究一下了,先从最简单的点击事件开始吧! 首先我们在test.wxml中加入以下 ...
微信小程序实现点击订阅消息在特定的时间点发送
前言首先这个下发订阅消息,是可以后端处理的:因此关于后端的操作,我就不讲了,后端定时触发这个下发操作可以通过定时器执行(后端处理相对简单灵活).但这里我们主要说云函数如何实现这个定操实现「小程序 ...
【微信小程序】点击复制功能的实现（常用于分享码，兑换码）
上周的项目中实现兑换功能,用于兑换码比较复制(英文大小写+数字),为方便用户兑换就实现了点击复制的功能效果图: 实现的代码: .wxml页面: <view class='commission' ...

微信小程序搜索（点击关键词搜索）

微信小程序搜索（点击关键词搜索）相关推荐

最新文章

热门文章