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

2024-11-07 来源：个人技术集锦

我上一个教程：是简单的输入关键词搜索，现在我又写了一个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({
      //URL
      url: '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;
        }

    //输出JSON
    echo json_encode($results);

    //当查询无结果的时候
    }else{

        //构建数组
        $arr = array(
            "noresult" => "暂无结果"
        );

        //把数组转换为json
        $data = json_encode($arr);
        echo "[$data]";
}

//断开数据库连接
mysql_close($con);
}
?>

Author:TANKING

显示全文

全部栏目

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