微信小程序--自定义组件之搜索框

组件：搜索框

功能：根据输入框输入值进行模糊查询并在下方滑动框中显示

功能图:

 

 

component.wxml

  
  
    
    
  
  取消



    
      {{item}}
    

 

component.js

// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    searchValue: '',
    titles:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  /*与后台连接得到数据*/
  req: function (searchValue) {
    var that=this;
    wx.request({
      url: 'http://127.0.0.1:8080/server.php',
      data: {
        title: searchValue
      },
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {

        console.log(res.data);
        that.setData({
          titles:res.data
        });
      },
      fail: function (res) {
        console.log(res)
      }
    })
  },
  searchNow: function () {
    var searchValue = this.data.searchValue;
    this.req(searchValue);
  }
  ,
  search: function (e) {
    var searchValue = e.detail.value;
    this.setData({
      searchValue: searchValue
    });
    this.req(searchValue);
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

component.wxss

/* pages/component/component.wxss */
.section_search,.section_show
{
  display: flex;
  margin-left: 10px;
}

.search_arr {
  border: 1px solid #d0d0d0;
  border-radius: 10rpx;
  margin-left: 20rpx;
}
.searchcion {
  margin: 10rpx 10rpx 10rpx 10rpx;
  position: absolute;
  left:38rpx;
  z-index: 2;
  width: 20px;
  height: 20px;
  text-align: center;
}
.search_arr input
{
  margin-left: 60rpx;
  height: 60rpx;
  border-radius: 5px;
  width: 200px;
}
.cancel
{
   margin-left: 15rpx;
  width: 15%;
  line-height: 150%;
  text-align: center;
  border: 1px solid #d0d0d0;
  border-radius: 10rpx;
}
.section_show
{
    margin-left: 100rpx;
    width: 200px;
}

后台PHP：sever.php

'localhost',
    'db'=>'books',
    'db_user'=>'root',
    'db_pwd'=>'pwd'
);
$title=$_POST['title']==""?"无数据":$_POST['title'];
$pdo=new PDO("mysql:host=".$mysql_conf['host'].";dbname=".$mysql_conf['db'],$mysql_conf['db_user'],$mysql_conf['db_pwd']);
$pdo->exec("set names 'utf8'");
#$sql="select * from books where  isbn=?";
$sql="select   * from books where title like ?";
$stmt=$pdo->prepare($sql);
$value=array();
#$stmt->bindValue(1,'1',PDO::PARAM_STR);
$stmt->bindValue(1,'%'.$title.'%',PDO::PARAM_STR);
#print_r( $stmt);
$rs=$stmt->execute();
if($rs)
{
    while($row=$stmt->fetch(PDO::FETCH_ASSOC))
    {
        $title=$row['title'];
        array_push($value,$title);
    }
}
$titles=json_encode($value);
echo $titles;
$pdo=null;
?>