[微信小程序]搜索功能实现,搜索框样式

傷城~ 2021-09-30 03:54 740阅读 0赞

微信小程序开发交流qq群   173683895

### ![20181223230203760.jpg][]   承接微信小程序开发。扫码加微信。 ###

### **正文：** ###

上效果图:

![SouthEast][]

![SouthEast 1][]![SouthEast 2][]

一:搜索框功能实现

1.在首页做一个搜索框的样式并实现跳转到搜索页面

.search{
      width: 80%;
    }
    .search_arr {
      border: 1px solid #d0d0d0;
      border-radius: 10rpx;
      margin-left: 20rpx;
    }
    .search_arr input{
      margin-left: 60rpx;
      height: 60rpx;
      border-radius: 5px;
    }
    .bc_text {
      line-height: 68rpx;
      height: 68rpx;
      margin-top: 34rpx;
    }
     
    .sousuo {
      margin-left: 15rpx;
      width: 15%;
      line-height: 150%;
      text-align: center;
      border: 1px solid #d0d0d0;
      border-radius: 10rpx;
    }
    .page_row{
      display: flex;
      flex-direction: row
    }
    .searchcion {
      margin: 10rpx 10rpx 10rpx 10rpx;
      position: absolute;
      left:25rpx;
      z-index: 2;
      width: 20px;
      height: 20px;
      text-align: center;
    }

js.点击跳转到搜索的页面

suo: function (e) {
        wx.navigateTo({
          url: '../search/search',
        })
      },

2.搜索页面实现搜索功能

<view class="search page_row">
      <input class="df_1" placeholder="请输入你有搜索的内容" value="{
       {searchValue}}" bindinput="searchValueInput" />
      <button bindtap="suo" data-id='1'>
        媒婆
      </button>
      <button bindtap="suo" data-id='2'>
        单身
      </button>
    </view>
    <view class="search_no" wx:if="{
       {!centent_Show}}">
      <text>很抱歉,没有找到您要搜索的资料/(ㄒoㄒ)/~~</text>
    </view>
    <import src="../index/card/card.wxml" />
    <template is="nanshen_card" data="{
       {nanshen_card,img}}" />

php实现代码

<?php
        header("Content-Type:text/html;charset=utf8"); 
    	header("Access-Control-Allow-Origin: *"); //解决跨域
    	header('Access-Control-Allow-Methods:POST');// 响应类型  
    	header('Access-Control-Allow-Headers:*'); // 响应头设置 
        $link=mysql_connect("localhost","root","root"); 
        mysql_select_db("shige", $link); //选择数据库
        mysql_query("SET NAMES utf8");//解决中文乱码问题
        
    	$str = $_POST['str'];
    	
    	
    	//SQL查询语句 SELECT * FROM 表名  LIKE 模糊搜索的变量
    	$q="SELECT * FROM curriculum WHERE CONCAT_WS('',school,college,major,mtype,title) LIKE '%{$str}%'";
    	
        $rs = mysql_query($q); //获取数据集
        if(!$rs){die("数据库没有数据!");}
    	
    	//循环读取数据并存入数组对象
        $dlogs;$i=0;
        while($row=mysql_fetch_array($rs))
        {
    			    $dlog['title']= $row["title"];
    			    $dlog['mtype']= $row["mtype"];
    				$dlog['name']= $row["name"];
    				$dlog['mfile']= $row["mfile"];
    				$dlog['myear']= $row["myear"];
    				$dlog['school']= $row["school"];
    				$dlog['college']= $row["college"];
    				$dlog['major']= $row["major"];
    				$dlog['time']= $row["time"];
            $dlogs[$i++]=$dlog;
        }
    	
    	
        //以json格式返回html页面
        echo urldecode(json_encode($dlogs));
    ?>

[20181223230203760.jpg]: https://img-blog.csdnimg.cn/20181223230203760.jpg
[SouthEast]: https://img-blog.csdn.net/20171128110814046?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU3MTM3NTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: https://img-blog.csdn.net/20171128111053652?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU3MTM3NTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 2]: https://img-blog.csdn.net/20171128111558106?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU3MTM3NTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast