Ajax 连接数据库实现类似百度搜索功能
Posted 江南渔雾
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax 连接数据库实现类似百度搜索功能相关的知识，希望对你有一定的参考价值。
1、html代码部分
<!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}
#xianshi{ width:300px; margin-top:20px}
#txt{ width:300px}
#name{ width:296px}
#list{ width:300px; position:absolute; z-index:5}
.sj{ width:298px; height:19px; border:1px solid #999; border-top:0px; background-color:white}
.sj:hover{ cursor:pointer}
#fg{ margin:30px 0px 20px 0px;}
</style>
</head>
<body>
<!--首先做一个外层div-->
<div id="xianshi">
<!--做两个div,分别放文本框和下拉列表-->
<div id="txt">
<input type="text" id="name" />
<!--<input type="button" value="搜索" id="btn" />-->
</div>
<div id="list">
</div>
</div>
<hr id="fg" />
<!--建一张表格，显示搜索到的数据-->
<table id="tb" width="100%" border="1" cellpadding="0" cellspacing="0">
</table>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
XianShi();
//输入内容显示下拉，不用点击按钮
$("#name").keyup(function(){
//先去到用户输入的值
var key = $(this).val();
//调用Ajax，
$.ajax({
async:false,//设置是否异步
url:"chuli.php",
data:{key:key,bs:0},
type:"POST",
dataType:"TEXT",
success: function(data){//到这里我们再去写php文件
//$("#list").text(data)先输出一下data,看一下输出什么值
if(data.trim() == "")//如果返回的值为空，不往下走了
{
$("#list").html("");//如果为空的话，清掉
}
else
{
var shuju = data.trim().split("|");//查看完之后，对数组进行拆分
var str = "";
for(var i=0;i<shuju.length;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","#F60");
})
//鼠标离开去掉背景色
$(".sj").mouseout(function(){
$(this).css("background-color","white");
})
//点击下拉列表框中的内容，将选中项的值放到文本框
$(".sj").click(function(){
var txt = $(this).text();
$("#name").val(txt);
$("#list").css("display","none");//输入完毕后，下拉列表框消失，但是再次输入就会不显示
XianShi();
})
XianShi();
})
$("#btn").click(function(){
XianShi();
})
});
function XianShi()
{//取关键字，根据关键字查询数据
var key = $("#name").val();
$.ajax({
url:"chuli.php",
data:{key:key,bs:1},//设置bs:1,是为了将此部分使用的Ajax代码，与前面的进行区分，使逻辑更清楚
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>
2、php代码
<?php
include("../DBDA.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);//调用StrQuery方法，直接输出字符串
}
else
{
if($key == "")//取到关键字后进行判断，如果是空字符串的话，返回为空，
{
echo "";
}
else
{
$sql = "select Name from car where Name like ‘%{$key}%‘";
echo $db->StrQuery($sql);
}
}
?>
以上是关于Ajax 连接数据库实现类似百度搜索功能的主要内容，如果未能解决你的问题，请参考以下文章