<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="public/bootstrap/css/bootstrap.min.css">
<script src="public/jquery/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="public/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<title>Document</title>
<style type="text/css">
.sousuo{
width: 100px;
height: 30px;
background-color: #117A8B;
border-radius: 3px;
text-align: center;
line-height: 30px;
color: white;
}
.sousuo:hover{
cursor: pointer;
}
</style>
</head>
<body>
区域：<label><input type="checkbox" onclick= "qx1(this)">全选</label><br />
<label ><input type="checkbox" name="" class="qy" value="博山" />博山</label>
<input type="checkbox" name="" class="qy" value="沂源" />沂源
<input type="checkbox" name="" class="qy" value="桓台" />桓台
<input type="checkbox" name="" class="qy" value="北京" />北京
<input type="checkbox" name="" class="qy" value="上海" />上海
<input type="checkbox" name="" class="qy" value="南京" />南京<br />
租赁类型：<input type="checkbox" onclick= "qx2(this)" />全选<br />
<input type="checkbox" name="" class="zl" value="合租" />合租
<input type="checkbox" name="" class="zl" value="整租" />整租<br />
房屋类型：<input type="checkbox" onclick= "qx3(this)" />全选<br />
<input type="checkbox" name="" class="fw" value="3室1厅" />3室1厅
<input type="checkbox" name="" class="fw" value="平房" />平房
<input type="checkbox" name="" class="fw" value="2室1厅" />2室1厅
<input type="checkbox" name="" class="fw" value="筒子楼" />筒子楼
<input type="checkbox" name="" class="fw" value="1室1厅" />1室1厅
<input type="checkbox" name="" class="fw" value="4室2厅" />4室2厅<br />
关键字：<input type="text" name="" id="gjz" value="" />
<div class="sousuo" onclick="sousuo()">搜索</div>
<table border="1" cellspacing="0" cellpadding="0" class="table table-bordered">
</table>
</body>
</html>
<script type="text/javascript">
var tab = document.getElementsByTagName("table")[0];
var qy = document.getElementsByClassName("qy");
var zl = document.getElementsByClassName("zl");
var fw = document.getElementsByClassName("fw");
//loadData('','','','');//加载页面
sousuo();
function loadData(tt,condition,condition1,condition2){
$.ajax({
type:"post",
url:"zlcl.php",
async:true,
data:{
"type":"chazhao",
"nm":tt,
"condition":condition,
"condition1":condition1,
"condition2":condition2
},
dataType:"json",
success:function(data){
var str ="";
var str ="<td>序号</td><td>关键字</td><td>区域</td><td>面积</td><td>租金</td><td>租赁类型</td><td>房屋类型</td>";
for(var i=0 ;i<data.length; i++){
str +="<tr>";
for(var j=0;j<data[i].length;j++){
//如果查所有字段不用判断 if(j == 1){
str +="<td>"+data[i][j].replace(tt,"<span style='color:red;'>"+tt+"</span>")+"</td>";
//}else{
//str +="<td>"+data[i][j]+"</td>";
//}
}
str +="</tr>";
}
tab.innerHTML = str;
}
});
}
function sousuo(){
var condition = '';
var quYu = $(".qy");
for(var i=0;i<quYu.length;i++){
if(quYu[i].checked == true){
condition +=' quyu="'+$(quYu[i]).val()+'" or';
}
}
condition = condition.substr(0,condition.length-2);
//===================
var condition1 ='';
var zulin = $(".zl");
for(var j=0;j<zulin.length;j++){
if(zulin[j].checked == true){
condition1 +=' zulinlx="'+$(zulin[j]).val()+'" or';
}
}
condition1= condition1.substr(0,condition1.length-2);
//======================
var condition2 ='';
var fangwu = $(".fw");
for(var k=0;k<fangwu.length;k++){
if(fangwu[k].checked == true){
condition2 +=' fangwlx="'+$(fangwu[k]).val()+'" or';
}
}
condition2= condition2.substr(0,condition2.length-2);
var gjz = document.getElementById("gjz").value;
loadData(gjz,condition,condition1,condition2);
}
function qx1(t){
for(var i=0;i<qy.length;i++){
if(t.checked){
qy[i].checked=true;
}else{
qy[i].checked=false;
}
}
}
function qx2(t){
for(var i=0;i<zl.length;i++){
if(t.checked){
zl[i].checked=true;
}else{
zl[i].checked=false;
}
}
}
function qx3(t){
for(var i=0;i<fw.length;i++){
if(t.checked){
fw[i].checked=true;
}else{
fw[i].checked=false;
}
}
}
</script>
主页
<?php $type = $_POST['type']; $conn = new mysqli("localhost","root","","ceshi"); $conn->connect_error?die("链接失败"):""; switch($type){ case "chazhao": $nm = $_POST['nm']; $condition = $_POST['condition']; $condition1 = $_POST['condition1']; $condition2 = $_POST['condition2']; $condit = ' 1=1 '; if($nm != ''){ $condit .=" and (name like '%{$nm}%' or quyu like '%{$nm}%') "; } if($condition != ''){ $condit .= 'and ('. $condition.')'; //quyu="沂源" select * from fwzl where ' 1=1 'and (name like '%{$nm}%' or quyu like '%{$nm}%')and quyu="沂源" } if($condition1 != ''){ $condit .= 'and ('. $condition1.')'; } if($condition2 != ''){ $condit .= 'and ('. $condition2.')'; } $sql = "select * from fwzl where $condit "; $result = $conn->query($sql); $attr = $result->fetch_all(); echo json_encode($attr); break; } ?>
php页面
区域：
沂源
桓台
北京
上海
南京
租赁类型：全选
合租
整租
房屋类型：全选
3室1厅
平房
2室1厅
筒子楼
1室1厅
4室2厅
关键字：
搜索
| 序号 | 关键字 | 区域 | 面积 | 租金 | 租赁类型 | 房屋类型 |
| 1 | 桓台空余 | 博山 | 100 | 1000 | 整租 | 3室1厅 |
| 2 | 沂源大产房 | 沂源 | 150 | 1599 | 合租 | 平房 |
| 3 | 桓台小道旁 | 桓台 | 200 | 500 | 合租 | 2室1厅 |
| 4 | 沂源大产房 | 张店 | 110 | 1200 | 整租 | 筒子楼 |
| 5 | 桓台小道旁 | 北京 | 80 | 2000 | 合租 | 4室2厅 |
| 6 | 博山空余 | 上海 | 90 | 3000 | 整租 | 1室1厅 |
| 7 | 博山空余 | 南京 | 300 | 5000 | 合租 | 筒子楼 |