<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>
<style type="text/css">
*{ margin:0px auto; padding:0px}
#tou{ 50px; height:50px; font-size:24px; margin-top:40px; font-family:"微软雅黑";}
#xianshi{ 300px; margin-top:15px}
#txt{ 300px;}
#name{ 296px}
#list{ 300px; position:absolute; z-index:5 }
.sj{ 298px; height:19px; border:1px solid #CCC; border-top:0px;background-color:#FFF}
.sj:hover{ cursor:pointer}
#fg{ margin:30px 0px 20px 0px;}
</style>
</head>
<div id="tou">搜索</div>
<body>
<div id="xianshi">
<div id="txt"><input type="text" id="name" /></div>
<div id="list"></div>
</div>
<hr id="fg" />
<table id="tb" width="80%" border="1" cellpadding="0" cellspacing="0">
</table>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
XianShi();
//输入内容显示下拉
$("#name").keyup(function(){
XianShi();
var key=$(this).val();
$.ajax({
async:false,
url:"dtserchcl.php",
data:{key:key,bs:0},
type:"POST",
dataType:"TEXT",
success: function(data){
if(data.trim()=="")
{
$("#list").html("");
}
else
{
var shuju=data.trim().split("|");
var str="";
for(var i=0;i<shuju.length;i++)
{
shuju[i];
str=str+"<div class='sj'>"+shuju[i]+"</div>";
}
$("#list").html(str);
$("#list").css("display","block");
}
}
});
//鼠标放上显示背景色
$(".sj").mouseover(function(){
$(".sj").css("background-color","white");
$(this).css("background-color","#CCC");
})
//鼠标离开去掉背景色
$(".sj").mouseout(function(){
$(this).css("background-color","white");
})
//点击将选中项的值放到文本框
$(".sj").click(function(){
var txt=$(this).text();
$("#name").val(txt);
$("#list").css("display","none");
XianShi();
})
XianShi();
})
});
function XianShi()
{
var key=$("#name").val();
$.ajax({
url:"dtserchcl.php",
data:{key:key,bs:1},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang=data.trim().split("|");
var str="<tr><td>汽车名称</td><td>系列</td><td>上市日期</td><td>油耗</td><td>价格</td></tr>";
for(var i=0;i<hang.length;i++)
{
var lie=hang[i].split("^");
str=str+"<tr><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td>"+lie[7]+"</td></tr>";
}
$("#tb").html(str);
}
});
}
</script>
</html>
处理页面
<?php
include("../DBDA.class.php");
$db=new DBDA();
$bs=$_POST["bs"];
$key=$_POST["key"];
if($bs==1)
{
$sql="select * from car where Name like '%{$key}%'";
echo $db->StrQuery($sql);
}
else
{
if($key=="")
{
echo "";
}
else
{
$sql="select Name from car where Name like '%{$key}%'";
echo $db->StrQuery($sql);
}
}