AJAX实现搜索智能提示
Posted 格调evo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX实现搜索智能提示相关的知识，希望对你有一定的参考价值。
<!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{ width:50px; height:50px; font-size:24px; margin-top:40px; font-family:"微软雅黑";} #xianshi{ width:300px; margin-top:15px} #txt{ width:300px;} #name{ width:296px} #list{ width:300px; position:absolute; z-index:5 } .sj{ width: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);
}
}
以上是关于AJAX实现搜索智能提示的主要内容，如果未能解决你的问题，请参考以下文章