您现在的位置是:首页 > 学无止境 > PHPPHP

PHP多条件内容混合筛选功能的实现方法

AndyGuo2020-06-06 19:06:30PHP2100人已围观

简介我们经常到购物类网站像淘宝天猫京东在搜索产品后都有筛选功能,如颜色,品牌,适合人群,地区多条件筛选,这些可以通过后端php来实现,当然也可以用前端实现

我们经常到购物类网站像淘宝天猫京东在搜索产品后都有筛选功能,如颜色,品牌,适合人群,地区多条件筛选,还有一些网站模板站也经常用到多条件筛选,这些可以通过后端php来实现,当然也可以用前端实现,本文给大家讲解一下用后端php实现,其实就是利用了搜索功能。

先看一下效果:

image.png

style.css

<style type="text/css">
 
.search_text{ overflow:hidden; height:100%; padding-top:5px; padding-bottom:5px;}
.search_text h1{ color:#6a6a6a; font-weight:bold; float:left; font-size:14px; margin:0px; padding:0px;}
.search_text ul{ margin:0; padding:0; list-style:none; float:left; overflow:hidden; height:100%;}
.search_text li{ list-style:none; color:#6a6a6a; float:left; width:80px; padding-left:8px; padding-right:5px; white-space:nowrap}
.search_text li a{ list-style:none; color:#6a6a6a;}
.search_text li a:hover{ list-style:none; color:#fe8f01; font-weight:bold; text-decoration:underline;}
.search_text li.selected{color:#fe8f01; font-weight:bold;}
.search_text li.selected a{color:#fe8f01;}
.search_text li.selected a:hover{color:#fe8f01;}
</style>

index.html

<div class="search_text" id="hangye">
  <h1>行业:</h1>
  <ul>
   <li class="selected"><a href="javascript:goSort('hangye',0)" rel="external nofollow" >全部</a></li>
   <li><a href="javascript:goSort('hangye',1)" rel="external nofollow" >通用</a></li>
   <li><a href="javascript:goSort('hangye',2)" rel="external nofollow" >农业</a></li>
   <li><a href="javascript:goSort('hangye',3)" rel="external nofollow" >农业</a></li>
   <li><a href="javascript:goSort('hangye',4)" rel="external nofollow" >工业</a></li>
   <li><a href="javascript:goSort('hangye',5)" rel="external nofollow" >胶装业</a></li>
   <li><a href="javascript:goSort('hangye',6)" rel="external nofollow" >科技</a></li>
   <li><a href="javascript:goSort('hangye',7)" rel="external nofollow" >金融</a></li>
   <li><a href="javascript:goSort('hangye',8)" rel="external nofollow" >广告</a></li>
   <li><a href="javascript:goSort('hangye',9)" rel="external nofollow" >房地产</a></li>
  </ul>
</div>
<div class="search_text" id="colors">
  <h1>颜色 :</h1>
  <ul>
   <li class="selected"><a href="javascript:goSort('colors',0);" rel="external nofollow" >全部</a> </li>
   <li><a href="javascript:goSort('colors',1);" rel="external nofollow" >黑色</a></li>
   <li><a href="javascript:goSort('colors',2);" rel="external nofollow" >白色</a></li>
   <li><a href="javascript:goSort('colors',3);" rel="external nofollow" >红色</a></li>
   <li><a href="javascript:goSort('colors',4);" rel="external nofollow" >蓝色</a></li>
   <li><a href="javascript:goSort('colors',5);" rel="external nofollow" >绿色</a></li>
   <li><a href="javascript:goSort('colors',6);" rel="external nofollow" >紫色</a></li>
  </ul>
</div>

<div class="search_text" id="fengge">
  <h1>风格:</h1>
  <ul>
   <li class="selected"><a href="javascript:goSort('fengge',0);" rel="external nofollow" >全部</a> </li>
   <li><a href="javascript:goSort('fengge',1);" rel="external nofollow" >Hhtml5响应式网站</a></li>
   <li><a href="javascript:goSort('fengge',2);" rel="external nofollow" >纯PC端网站</a></li>
   <li><a href="javascript:goSort('fengge',3);" rel="external nofollow" >自适应网站</a></li>
   <li><a href="javascript:goSort('fengge',4);" rel="external nofollow" >wap网站</a></li>
  </ul>
</div>

js.js

<script language="javascript">
function getQueryString(){
   var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+","g"));
   if(result == null){
     return "";
   }
   for(var i = 0; i < result.length; i++){
     result[i] = result[i].substring(1);
   }
   return result;
}
function goSort(name,value){
  var string_array = getQueryString();
  var oldUrl = (document.URL.indexOf("search.php")==-1)?document.URL+"search.php":document.URL;
  var newUrl;
  if(string_array.length>0)//如果已经有筛选条件
  {  var repeatField = false;
    for(var i=0;i<string_array.length;i++){
      if(!(string_array[i].indexOf(name)==-1)){
        repeatField = true;//如果有重复筛选条件,替换条件值
        newUrl = oldUrl.replace(string_array[i],name+"="+value);
      }
    }
    //如果没有重复的筛选字段
    if(repeatField == false){
      newUrl = oldUrl+"&"+name+"="+value;
    }
  }else{//如果还没有筛选条件
    newUrl = oldUrl+"?"+name+"="+value;
  }
  //跳转
  window.location = newUrl;
}
function setSelected(name,value){
  var all_li = $("#"+name).find("li");
  //清除所有li标签的selected类
  all_li.each(function(){
    $(this).removeClass("selected");
  });
  //为选中的li增加selected类
  all_li.eq(value).addClass("selected");
}
$(document).ready(function(){
  var string_array = getQueryString();
  for(var i=0;i<string_array.length;i++){
    var tempArr = string_array[i].split("=");
    setSelected(tempArr[0],tempArr[1]);//设置选中的筛选条件
  }
});
</script>

search.php

<?php
/**
*加入搜索条件
*/
$where ="1";
$hangye_array = array(1=>'0',2=>'1',3=>'2',4=>'3',5=>'4',6=>'5');
$colors_array = array(1=>'0',2=>'1',3=>'2',4=>'3',5=>'4',6=>'5');
$fengge_array = array(1=>'0',2=>'1',3=>'2',4=>'3',5=>'4',6=>'5',7=>'6');
   
if(isset($hangye)&&($hangye!=0)) $where .= " AND hangye=".$hangye_array[$hangye];
if(isset($colors)&&($colors!=0)) $where .= " AND colors=".$colors_array[$colors];
if(isset($fengge)&&($fengge!=0)) $where .= " AND fengge=".$fengge_array[$fengge];
/**
*加入搜索条件
*/
?>

PHP中获取到$where条件,加入到SQL语句中获取数据列表。

我们可以用在一些常用的CMS中,如yzmcms、dedecms、pbootcms、phpcms

以上就是通过php实现多条件内容筛选的方法了,希望对大家有所帮助。


小郭博客

标签云 更多

关闭
QQ 微信 支付宝扫一扫打赏