模仿google搜索欄功能的效果
源代碼如下：
以下是引用片段：//
原創作品
本站原創:www.111cn.cn
作者:面條愛兔子 QQ:271728967
注明:轉載請說明原出去 http://www.111cn.cn
//
現在長沙下著大雪啊,晚上回家也沒什麼事作,白天在公司寫一個BBS完成了一部份,突然昨天聽一個網友說如果能實現google效果就好了,今天無聊之下就想了想,覺得這個用ajax做應該不是什麼難道了,就試著寫了,說句實話我學AJax時間很短,也只懂皮毛了,各位看了後別丟石頭了,把錢包丟過來吧,過年沒錢用,;)呵呵.好了廢話就不多說了下面進行正題.
首先我總體的簡介一下,我只用了兩個文件了,因為是測試所以就不分那麼清楚了,把JS文件和html寫在一個文件test.html裡面了,還有一個就是php文件post.PHP了,這個文件用來處理ajax發送過來的數進行處理,再由AJax把數據返回給test.Html裡面的div, 原理不這麼簡單了,下面我們來看代碼.
第一步創建數據表:test
CREATE TABLE `test` (
`id` int(4) NOT NULL auto_increment,
`title` varchar(50) default NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=gb2312 AUTO_INCREMENT=5 ;
好了數據庫創建成功了我們就來建立test.Html文件,這個文件很簡單,就是一個表單和一個div和CSS
<style>
<!--
body{font-size:12px;}
#show{border:1px solid #9abcde; line-height:23px; width:200px; margin:0px;}
#show li{list-style:none;}
#sug{margin:0px auto;}
-->
</style>
上面為CSS了就是用來控制效果的,
<table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
<form name="form1" method="post" action=""><tr>
<td>
<input name="key" type="text" id="key" onBlur="losefouse();" size="27" autocomplete=off >
<input type="submit" name="Submit" value="111cn搜索">
</td>
</tr></form>
<tr>
<td><div id="sug" ></div></td>
</tr>
</table>
這上面為內容了,關於函數我們下面來具體的說明.
第二步:就是JS和XMLhttp的處理和調用了.
創建XMLhttp,這個函數我上次講AJax+PHP模仿window文件管理器時講過了,在用戶注冊也講過了,這裡不不說了,具體地址請到:
var XMLHttp = false;
function AJaxcreate(){
try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
XMLHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != \\\’undefined\\\’) {
xmlHttp = new XMLHttpRequest();
}
if(!xmlHttp){alert(\\\’Create XMLhttp Fail \\\’);return false;}
}
下面這個函數sugguest()作用是取得key的值並發送給post文件進行處理,再調用returnstate()函數
function sugguest(){
AJaxcreate();
var xmvalue=document.getElementById("key").value;
var url="post.PHP?key="+encodeURI(xmvalue)+"rnd="+Math.random();
if (xmvalue== null || xmvalue.length>20 || xmvalue == "") return false;
XMLHttp.open("POST",url,true);
XMLHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
XMLHttp.send(xmvalue);
XMLHttp.onreadystatechange=returnstate;
}
下面returnstate()函數是判斷XMLhttp的狀態是否等4,4表示發送成功,其實還一個200表示接收完畢
function returnstate(){
if(XMLHttp.readyState != 4 ){
document.getElementById("sug").innerHtml="plase wait....";
}
if(XMLHttp.readyState == 4 ){
document.getElementById("sug").innerHtml=XMLHttp.responseText;
}
}
後面這些函數就是一些基本的處理我就不講了,
function fillin(str){
document.getElementById(\\\’key\\\’).value=str;
obj =document.getElementById(\\\’sug\\\’);
obj.innerHtml=\\\’\\\’;
obj.style.display=\\\’none\\\’;
}
function other(){
document.getElementById(\\\’sug\\\’).style.display=\\\’block\\\’;
}
function losefouse(){
setInterval("func()",4000);
var time=setInterval("func()",1000);
clearTimeout(time);
}
function func(){
ob=document.getElementById(\\\’sug\\\’);
ob.style.display = \\\’none\\\’;
}
最後面就是post.PHP文件了,接著下一篇了.
現在來講一下post.php文件了,post.php文件很簡單,這個不一定用PHP可以用很多,只要是服務器腳都可以完成,{個人意見}
header("Content-type:text/Html;charset=gb2312");我只說講這一句了,設置文檔編碼.
$key =isset($_POST[’key’])?$_POST[’key’]:’’;
$sql ="select title from test where title like ’%$key%’ order by title desc";
$result =mysql_query($sql) or dIE(MySQL_error());
echo"<div id=show >";
while ($rs =MySQL_fetch_array($result) ){
echo "<li onMouseOver=\"this.style.background=’#d7ebff’\" onMouSEOut=\"this.style.background=’#ffffff’\" onclick=\"Javascript:fillin(this.innerHtml);\">".$rs[’title’]."</li>";
}
echo"</div>";