显示页面：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <script src="../jquery-1.11.2.min.js"></script> 8 <style type="text/css"> 9 *{ margin:0px auto; padding:0px} 10 #xianshi 11 { 12 300px; margin-top:50px;} 13 #txt 14 { 15 300px;} 16 #name 17 { 18 296px;} 19 #list 20 { 21 300px; position:absolute;} 22 .sj 23 { 24 296px; height:19px; border:1px solid #666; border-top:0px; background-color:#FFF;} 25 .sj:hover 26 { 27 cursor:pointer;} 28 #fg 29 { 30 margin:30px 0px 20px 0px} 31 </style> 32 <body> 33 <div id="xianshi"> 34 <div id="txt"><input type="text" id="name" /></div> 35 <div id="list"></div> 36 </div> 37 <hr id="fg" /> 38 <table id="tb" width="100%" border="1" cellpadding="0" cellspacing="0"> 39 40 </table> 41 </body> 42 <script type="text/javascript"> 43 $(document).ready(function(e) { 44 xianshi(); 45 46 //输入内容显示下拉 47 $("#name").keyup(function(){ 48 var key = $(this).val(); 49 $.ajax({ 50 url:"chuli.php", 51 async:false, 52 data:{key:key,bs:0}, 53 type:"POST", 54 dataType:"TEXT", 55 success: function(data){ 56 if(data.trim() == "") 57 { 58 $("#list").html(""); 59 } 60 else 61 { 62 var shuju = data.trim().split("|"); 63 var str = ""; 64 for(var i=0;i<shuju.length;i++) 65 { 66 str = str+"<div class='sj'>"+shuju[i]+"</div>"; 67 } 68 $("#list").html(str); 69 $("#list").css("display","block"); 70 } 71 } 72 73 }); 74 //鼠标放上显示背景色 75 $(".sj").mousemove(function(){ 76 $(".sj").css("background-color","#FFF"); 77 $(this).css("background-color","#06F") 78 }) 79 //鼠标离开去掉背景色 80 $(".sj").mouseout(function(){ 81 $(this).css("background-color","#FFF"); 82 }) 83 //点击将选中项的值放在文本框 84 $(".sj").click(function(){ 85 var txt = $(this).text(); 86 $("#name").val(txt); 87 $("#list").css("display","none"); 88 xianshi(); 89 }) 90 91 xianshi(); 92 }) 93 }); 94 function xianshi() 95 { 96 var key = $("#name").val(); 97 98 $.ajax({ 99 url:"chuli.php", 100 data:{key:key,bs:1}, 101 type:"POST", 102 dataType:"TEXT", 103 success: function(data){ 104 var hang = data.trim().split("|"); 105 var str = "<tr><td>汽车名称</td><td>汽车系列</td><td>上市时间</td><td>油耗</td><td>价格</td></tr>"; 106 for(var i=0;i<hang.length;i++) 107 { 108 var lie = hang[i].split("^"); 109 str = str +"<tr><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td>"+lie[7]+"</td></tr>"; 110 } 111 112 $("#tb").html(str); 113 } 114 115 }); 116 } 117 </script> 118 </html>
处理页面：
1 <?php 2 include("../DBDA.php"); 3 $db = new DBDA(); 4 $bs = $_POST["bs"]; 5 $key = $_POST["key"]; 6 if($bs == 1) 7 { 8 $sql = "select * from car where Name like '%{$key}%'"; 9 echo $db->strquery($sql); 10 } 11 else 12 { 13 if($key == "") 14 { 15 echo ""; 16 } 17 else 18 { 19 $sql = "select Name from car where Name like '%{$key}%'"; 20 echo $db->StrQuery($sql); 21 } 22 }
显示结果：
