標籤：
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代碼
<?phpinclude("../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 == "")//取到關鍵字後進行判斷，如果是Null 字元串的話，返回為空白，{echo "";}else{$sql = "select Name from car where Name like ‘%{$key}%‘";echo $db->StrQuery($sql);}}?>
Ajax 串連資料庫實作類別似百度搜尋功能
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
