ajax之搜尋提示

作者：Eve Cole 更新時間：2009-06-07 14:56:52

資料庫表格：複製內容到剪貼簿代碼:

CREATE TABLE `xqbar`.`suggest` (
`id` INT NOT NULL AUTO_INCREMENT ,
`title` VARCHAR( 100 ) NOT NULL ,
`hits` INT NOT NULL DEFAULT '0',
PRIMARY KEY ( `id` )
) ENGINE = InnoDB

insert into suggest(title,hits)values('xqbar.com',100);
insert into suggest(title,hits)values('www.xqbar.com',410);
insert into suggest(title,hits)values('http://xqbar.com',700);
insert into suggest(title,hits)values('mail:xqbar.com',200);
insert into suggest(title,hits)values('ftp:xqbar.com',100);
insert into suggest(title,hits)values('http://www.xqbar.com',70)search.php
(關於php我也是接觸不久，下面的php如果囉嗦還望高手指點)
傳回的訊息字串要為xxx1|xxx2$200|100 前後對應複製內容到剪貼簿代碼:

<?php
if($_GET["action"]!=''){
#取得使用者輸入的關鍵字
$keyword=$_GET["keyword"];
#過濾關鍵字
$keyword=str_replace("[","[[]",$keyword);
$keyword=str_replace("&","[&]",$keyword);
$keyword=str_replace("%","[%]",$keyword);
$keyword=str_replace("^","[^]",$keyword);
#連結資料庫
$conn=mysql_connect("localhost","xqbar","xqbaradmin");
#選擇資料庫
@mysql_select_db("xqbar") or die('sorry');
mysql_query('set names utf-8');
#查詢語句
$sql="select title,hits from suggest where title like '%".$keyword."%' order by hits desc limit 10";
$result=mysql_query($sql);
#循環得到查詢結果，回傳字串
#格式為結果1|結果2$結果1點擊次數|結果2點擊次數
if($result){
$i=1;$title='';$hits='';
while($row=mysql_fetch_array($result,MYSQL_BOTH))
{
$title=$title.$row['title'];
$hits=$hits.$row['hits'];
if($i<mysql_num_rows($result))
{
$title=$title."|";
$hits=$hits."|";
}
$i++;
}
}
mysql_close();
}
?>
<?php echo $title.'$'.$hits;?>js程式碼複製內容到剪貼簿程式碼:

引入prototye.js有朋友說這個庫太大，或者把，不習慣的朋友可以使用jquery.js框架或直接創建ajax對象，這個我就不想說了，這裡直接引用prototye.js框架
<script type="text/javascript" src="prototype.js"></script>
建立圖層和顯示查詢結果的js程式碼
<script type="text/javascript">
//定義變數lastindex 表示為滑鼠在查詢結果上滑動所在位置，初始為-1
var lastindex=-1;
//定義變數flag 表示是否依照使用者輸入的關鍵字進行ajax查詢,flase為允許查詢true為禁止查詢
var flag=false;
//傳回的查詢結果所產生的陣列長度
var listlength=0;
//建立自定字串，優化效率
function StringBuffer(){this.data=[];}
//賦值
StringBuffer.prototype.append=function(){this.data.push(arguments[0]);return this;}
//輸出
StringBuffer.prototype.tostring=function(){return this.data.join("");}
//去掉字串兩邊空格
String.prototype.Trim = function(){return this.replace(/(^s*)|(s*$)/g, "");}
//隱藏函數主要是隱藏顯示的提示下拉層和iframe，關於iframe下面在說其作用
function hiddensearch()
{
$('rlist').style.display="none";
$('rFrame').style.display="none";
}
//顯示函數主要是顯示的提示下拉層和iframe 參數num,根據該參數控制要顯示提示層和iframe的高度
function showsearch(num)
{
$('rlist').style.display='';
$('rFrame').style.display='';
//這裡我定義每個回傳查詢結果的提示高度為20px,其中提示層總高度又加了num,是因為我在定義樣式時使用了padding一個像素
$('rlist').style.height=num*20+num+'px';
//同樣定位iframe的高度
$('rFrame').style.height=num*20+num+'px';
}
//傳回文字輸入框的座標函數，參數element為要傳回的物件,參數offset可選為offsetLeft|offsetTop 分別表示為此物件距離左視窗上角的絕對位置
//www.devdao.com 利用這個函數可以定位我們要顯示的提示圖層位置，讓提示圖層正確的顯示在文字輸入框下面
function getposition(element,offset)
{
var c=0;
while(element)
{
c+=element[offset];
element=element.offsetParent
}
return c;
}
//建立提示層函數包含提示層和為了避免在文字輸入框下面出現select下拉選框時我們的提示層不能再select之上的iframe
//可以理解為當文字輸入框下有select下拉選框時從底向上依序為select下拉選框-iframe-提示層
function createlist()
{
//建立提示層
var listDiv=document.createElement("div");
//提示層id
listDiv.id="rlist";
listDiv.style.zIndex="2";
listDiv.style.position="absolute";
listDiv.style.border="solid 1px #000000";
listDiv.style.backgroundColor="#FFFFFF";
listDiv.style.display="none";
listDiv.style.width=$('keyword').clientWidth+"px";
listDiv.style.left=getposition($('keyword'),'offsetLeft')+1.5+"px";
listDiv.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";

<form id="form1" name="form1" method="post" action="">
<b>輸入搜尋關鍵字</b>
<input name="keyword" type="text" class="inputblue" id="keyword" maxlength="20" style="width:300px;" />
</form>