Ajax 串連資料庫實作類別似百度搜尋功能

來源:互聯網
上載者:User

標籤:

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 串連資料庫實作類別似百度搜尋功能

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.