Ajax検索プロンプト

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

データベーステーブル: コンテンツをクリップボードにコピーするコード:

CREATE TABLE `xqbar`.`suggest` (
`id` INT NOT NULL AUTO_INCREMENT 、
`タイトル` VARCHAR( 100 ) NOT NULL 、
`ヒット` INT NOT NULL デフォルト '0'、
主キー (`id`)
) ENGINE = InnoDB

insert into assign(title,hits)values('xqbar.com',100);
挿入にsuggest(title,hits)values('www.xqbar.com',410);
挿入にsuggest(title,hits)values('http://xqbar.com',700);
挿入にsuggest(title,hits)values('mail:xqbar.com',200);
挿入にsuggest(title,hits)values('ftp:xqbar.com',100);
suggest(title,hits)values('http://www.xqbar.com',70)search.php に挿入
(私は長い間 PHP に触れていません。以下の PHP が冗長すぎる場合は、専門家からのアドバイスが必要です)
返される情報文字列は xxx1|xxx2$200|100 である必要があります。前後のクリップボードコードにコピーされる内容は次のとおりです

。
if($_GET["アクション"]!=''){
#ユーザーが入力したキーワードを取得する
$keyword=$_GET["キーワード"];
#キーワードをフィルターする
$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") または die('sorry');
mysql_query('セット名 utf-8');
#クエリステートメント
$sql="タイトルを選択,タイトルからのヒット数は '%" のようなものです。$keyword."%' ヒット数による並べ替え制限 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['タイトル'];
$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;
// ユーザーが入力したキーワードに基づいて ajax クエリを実行するかどうかを示す変数 flag を定義します。 false はクエリが許可されることを意味し、true はクエリが禁止されることを意味します。
var フラグ = false;
//返されたクエリ結果によって生成された配列の長さ
var リストの長さ = 0;
//効率を最適化するためにカスタム文字列を作成します
関数 StringBuffer(){this.data=[];}
//割り当て
StringBuffer.prototype.append=function(){this.data.push(arguments[0]);これを返す;}
//出力
StringBuffer.prototype.tostring=function(){return this.data.join("");}
//文字列の両側のスペースを削除します
String.prototype.Trim = function(){return this.replace(/(^s*)|(s*$)/g, "");}
//hidden 関数は主に、表示されるプロンプトドロップダウンレイヤーと iframe を非表示にすることです。iframe の関数については後述します。
関数隠し検索()
{
$('rlist').style.display="none";
$('rFrame').style.display="none";
}
//表示関数は主にプロンプトドロップダウンレイヤーと iframe パラメーターを表示します。このパラメーターに従って、表示されるプロンプトレイヤーと iframe の高さを制御します。
関数 showsearch(番号)
{
$('rlist').style.display='';
$('rFrame').style.display='';
//ここでは、返された各クエリ結果のプロンプトの高さを 20 ピクセルとして定義します。スタイルを定義するときに 1 ピクセルのパディングを使用したため、プロンプトレイヤーの合計の高さが num に追加されます。
$('rlist').style.height=num*20+num+'px';
// iframe の高さも配置します
$('rFrame').style.height=num*20+num+'px';
}
//テキスト入力ボックスの座標関数を返します。パラメータ要素は返されるオブジェクトです。パラメータのオフセットは、それぞれ左ウィンドウの上隅からのオブジェクトの絶対位置を表します。
//www.devdao.com この関数を使用して、表示するプロンプトレイヤーを見つけ、プロンプトレイヤーがテキスト入力ボックスの下に正しく表示されるようにします。
関数 getposition(要素,オフセット)
{
var c=0;
while(要素)
{
c+=要素[オフセット];
要素=要素.オフセット親
}
cを返します。
}
//プロンプトレイヤーを作成する関数にはプロンプトレイヤーが含まれており、テキスト入力ボックスの下に選択ドロップダウンボックスが表示されるのを避けるために、プロンプトレイヤーはその上の iframe を選択できなくなりました。
//テキスト入力ボックスの下に選択ドロップダウンボックスがある場合、下から上に選択ドロップダウンボックス-iframe-promptレイヤーであることがわかります。
関数createlist()
{
//プロンプトレイヤーを作成
var listDiv=document.createElement("div");
//プロンプトレイヤーID
listDiv.id="rlist";
listDiv.style.zIndex="2";
listDiv.style.position="絶対";
listDiv.style.border="solid 1px #000000";
listDiv.style.backgroundColor="#FFFFFF";
listDiv.style.display="none";
listDiv.style.width=$('キーワード').clientWidth+"px";
listDiv.style.left=getposition($('keyword'),'offsetLeft')+1.5+"px";
listDiv.style.top =(getposition($('キーワード'),'offsetTop')+$('キーワード').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>