少し前に、Google サジェストを使用したいと思い、インターネット上で多くの結果を見つけましたが、満足のいく結果が得られなかったので、時間をかけて作成しました。その後のおおよその結果は、Google サジェストの範囲を超えています。このプログラム。より完全なコードについては、データベースをサポートするこのバージョンを参照してください。スクリプトハウスによる編集とテスト後。
Asp + Ajax 模倣 Google 検索プロンプト効果データベース バージョン
修正が必要な箇所があります:
次のようにコードをコピーします。
JavaScript.js
var url=ajax.asp; //バックエンドアドレス
var time_layajax=300; //検索遅延
var time_layupdown=100; //方向キーの遅延
obj_div.style.top = (xtop + 20) + px; //20 は入力ボックスの高さとほぼ同じです。実際の状況に応じて調整してください。
ajax_xmlhttp.send(sift_value=+escape(temp_value)); //バックグラウンドに送信される値
dd=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,event)/ onmousemove=/moveli();/><span>約 +c [1]+result</span>+c[0]+</li>;//****li の表示
バックグラウンド出力結果の形式は「テキスト 1、テキスト 2」である必要があります。
「java、2」javascript、11「java の例、22」など。
デフォルト.css
次のようにコードをコピーします。
.ajaxsearch {
width:300px; //プロンプトレイヤーの幅
}
ホームインデックス.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>
<頭>
<meta http-equiv=Content-Type content=text/html;
<link rel=stylesheet type=text/css href=default.css />
<script language=JavaScript src=javascript.js type=text/javascript></script>
<title>Google が推奨する模倣度の高い例</title>
</head>
<body onResize=removediv();>
<div style=margin:20px 50px>
<input style=width:298px;height:18px type=text autocomplete=off onBlur=blurdeal(); onKeyDown=keydowndeal(event);
</div>
</body>
</html>
スクリプトjavascript.js
次のようにコードをコピーします。
////////////////////////////////検索プロンプトボックス////////////// /// //////////////////
var obj_div; // プロンプトレイヤーオブジェクト
var obj_input; //入力ボックスオブジェクト
var main_delay; //判定値変更遅延オブジェクト
var ajax_delay; //ajax 遅延検索オブジェクト
var updown_lay; //方向キー遅延オブジェクト
var ajax_xmlhttp;
var div_word=null //現在のプロンプト層に対応する値を検索します。
var li_num=-1; //疑似カーソル位置、選択したレイヤーの li 番号を 0 から開始します。
var li_down=-1; //マウスが押されたときのプロンプト層のシーケンス番号
var value_ed=; //遅延前の入力ボックスの値
var value_ing=; //入力ボックスの現在の値
var value_unexit=; // 結果がない値の先頭を検索します。
var updown_run=false; //上下の矢印キーを許可します。
var ajax_run=false; //true は通常のプロセスを意味し、false は Ajax を停止します。
var ajax_run_ing=false; // true は実行中、false はアイドル状態です。
var input_focus=false; //テキストボックスのフォーカス
var url=ajax.asp; //バックエンドアドレス ************************************* *********************
var time_layajax=300; //検索遅延*************************************** ***** *******************
var time_layupdown=100; //方向キーの遅延*************************************** ** ****************
var $=function(Fun_id){
戻り document.getElementById(Fun_id);
}
試す{
ajax_xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}キャッチ(e){
試す{
ajax_xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
}キャッチ(e){
試す{
ajax_xmlhttp= 新しい XMLHttpRequest();
}catch(e){ajax_xmlhttp=null;}
}
}
/////////////////////////プロンプトレイヤーを作成////////////////////// // /
関数createajaxdiv(){
var create_div = document.createElement(div);
create_div.type = div;
varプロンプトdiv = document.body.appendChild(create_div);
プロンプトdiv.className = ajaxsearch;
obj_div=プロンプトdiv;
}
//////////////////////////プロンプトレイヤーの位置を設定します/////////////////// //// //
関数が削除されましたiv(){
if(!obj_div || !obj_input)return false;
if(obj_div.style.display==none) false を返します。
var obj=obj_input;
var xtop=0;
var xleft=0;
while(obj){
xtop += obj[offsetTop];
xleft += obj[オフセット左];
obj = obj.offsetParent;
}
obj_div.style.left = xleft + px;
obj_div.style.top = (xtop + 20) + px; //20 は入力ボックスの高さとほぼ同じなので、実際の状況に応じて調整してください*************** ****** ***************************************8
li_down=-1;
}
/////////////////////////プロンプトレイヤーを非表示////////////////////// // /
関数 Hideajaxdiv(){
obj_div.style.display=none;
li_down=-1;
}
//////////////////////////選択した <li>CSS スタイルを設定します//////////////// /// //////
関数 setlistyle(){
for(var i=0;i<obj_div.firstChild.childNodes.length;i++){
obj_div.firstChild.childNodes[i].id=;
}
if(li_num!=-1)obj_div.firstChild.childNodes[li_num].id=liseleted;
}
//////////////////////////マウスがプロンプト層を通過します///////////////// ////// //
関数 overli(Fun_seletedlinum){
if(li_num==-1)value_ing=obj_input.value;
li_num=Fun_seletedlinum;
setlistyle();
}
//////////////////////////マウスドラッグプロンプトレイヤー//////////////////// // ///
関数moveli(){
if(window.getSelection){
setfocus();
window.getSelection().removeAllRanges();
}それ以外{
document.selection.empty();
setfocus();
}
}
//////////////////////////マウスプレスプロンプトレイヤー//////////////////// // ///
関数 downli(Fun_seletedlinum){
if(!obj_input) false を返します;
li_down=Fun_seletedlinum;
入力フォーカス = true;
}
//////////////////////////マウスポップアッププロンプトレイヤー////////////////// //// ///
関数 upli(Fun_seletedlinum,Fun_event){
if(!obj_input) false を返します;
if(Fun_event.button==2){li_down=-1;return}
if(li_down!=Fun_seletedlinum){
li_down=-1;
false を返します。
}
clearTimeout(ajax_delay);
クリアタイムアウト(アップダウン遅延);
アップダウンラン = true;
ajax_run=false;
ajax_run_ing=false;
li_num=-1;
div_word=null;
value_ed=obj_div.firstChild.childNodes[Fun_seletedlinum].childNodes[1].nodeValue;
obj_input.value=value_ed;
value_ing=value_ed;
Hideajaxdiv();
obj_div.innerHTML=;
}
//////////////////////////フォーカスを取得するテキスト ボックスを設定します///////////////// ///// //
関数 setfocus(){
if(ウィンドウ.イベント){
var r = obj_input.createTextRange();
r.moveStart('character',obj_input.value.length);
r.collapse(true);
r.select();
}それ以外{
obj_input.selectionStart=obj_input.value.length;
obj_input.focus();
}
}
//////////////////////////テキスト ボックスがフォーカスを失います/////////////////// //// //
関数 Bludeal(){
if(input_focus==true){
setfocus();
setTimeout(setfocus());
false を返します。
}
アップダウンラン=false;
ajax_run=false;
ajax_run_ing=false;
クリアインターバル(メイン遅延);
clearTimeout(ajax_delay);
クリアタイムアウト(アップダウン遅延);
Hideajaxdiv();
if(value_ed!=obj_input.value)obj_div.innerHTML=;
}
//////////////////////////テキスト ボックスにフォーカスが置かれます//////////////////// /// //
function focusdeal(Fun_event){
if(!obj_div)createajaxdiv();
if(input_focus==true){
入力フォーカス=false;
false を返します。
}
var obj=((window.event)?Fun_event.srcElement:Fun_event.target);
if(obj.type!=text)return false;
updown_run=true;
ajax_run=true;
ajax_run_ing=false;
if(obj_input==obj && value_ed==obj.value && obj_div.innerHTML!=){
obj_div.style.display=ブロック;
削除されたiv();
}それ以外{
obj_input=obj;
value_ed=obj.value;
value_ing=obj.value;
値_unexit=;
li_num=-1;
li_down=-1;
div_word=null;
obj_div.innerHTML=;
削除されたiv();
}
main_delay=setInterval(mainajax(),10);
}
/////////////////////////メイン機能 /////////////////////// ///
関数 mainajax(){
if(value_ed==obj_input.value)return false;
if(value_unexit!= && (obj_input.value).indexOf(value_unexit)==0){hideajaxdiv();obj_div.innerHTML=;return false;}
if(value_ed!=obj_input.value && ajax_run_ing==false){
ajax_run=true;
value_ed=obj_input.value;
clearTimeout(ajax_delay);
if(obj_input.value!=){
ajax_delay=setTimeout(getsearch();,time_layajax);
}それ以外{
Hideajaxdiv();
obj_div.innerHTML=;
ajax_run=false;
false を返します。
}
}
}
/////////////////////////検索コンテンツを取得////////////////////// ////
関数 getsearch(){
var temp_value=obj_input.value;
if(ajax_xmlhttp==null){
false を返します。
}else if(ajax_xmlhttp.readyState!=0){
ajax_xmlhttp.abort();
ajax_run_ing=false;
}
ajax_xmlhttp.onreadystatechange=function(){
if(ajax_run==false){ajax_xmlhttp.abort();ajax_run_ing=false;return false;}
if(ajax_xmlhttp.readyState==4){
obj_div.innerHTML=;
if(ajax_xmlhttp.status==200 || ajax_xmlhttp.status==304){
var content=ajax_xmlhttp.responseText;
if(contant!= && ajax_run==true){
div_word=temp_value;
obj_div.innerHTML=resetcontant(contant);
obj_div.style.display=ブロック;
削除されたiv();削除されたiv();
}それ以外{
Hideajaxdiv();
}
アップダウンラン = true;
ajax_run_ing=false;
li_num=-1;
if(contant==)value_unexit=temp_value;
}
}
}
ajax_xmlhttp.open(post,url,true);
ajax_xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
ajax_run_ing=true;
ajax_xmlhttp.send(sift_value=+escape(temp_value)); //バックグラウンドに送信された値**************************** * ***********
}
/////////////////////////コンテンツ再構成/////////////////////// //
関数リセットコンタント(Fun_contant){
if(Fun_contant==null || Fun_contant==)return ;
var a=Fun_contant.substring(1,Fun_contant.length-1);
if(Fun_contant==null || Fun_contant==)return ;
var b=a.split('');
変数c;
ヴァード;
d=<ul>;
for(var i in b){
c=b[i].split(,);
//*********************************************** ***************
d=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,event)/ onmousemove=/moveli();/><span>約 +c [1]+結果</span>+c[0]+</li>;
//*********************************************** ***************
}
d=d+<li onmousedown=/input_focus=true;li_down=-1;/ onmouseup=/li_down=-1/ onmousemove=/moveli();/><span><a class=/shutajaxdiv/ onclick=/hideajaxdiv( );/>閉じる</a></span></li>
d=d+</ul>;
dを返します。
}
/////////////////////////キーボードイベント////////////////////// ////
関数 keydowndeal(Fun_event){
var keyc=((window.event)?Fun_event.keyCode:Fun_event.that);
if(keyc==13){hideajaxdiv();return false;}
if(keyc==27){
if(obj_div.style.display==block && li_num>-1)value_ed=obj_input.value=value_ing;
Hideajaxdiv();
false を返します。
}
if(keyc==40 || keyc==38){
if(div_word==obj_input.value && obj_div.style.display==none && obj_div.innerHTML!=){
obj_div.style.display=ブロック;
削除されたiv();
false を返します。
}
if(li_num==-1){
if(div_word!=obj_input.value) false を返します。
}それ以外{
if(div_word!=value_ing)return false;
}
if(updown_run==false || ajax_run_ing==true || obj_div.style.display==none)return false;
updown_delay=setTimeout(updownli(+keyc+),time_layupdown);
アップダウンラン=false;
}
}
//////////////////////////方向キー移動リ//////////////////// /// //
関数 updownli(Fun_key){
if(!obj_div){false を返す;}
アップダウンラン = true;
if(li_num==-1){
if(div_word!=obj_input.value){hideajaxdiv();obj_div.innerHTML=;li_num=-1;return false;}
}それ以外{
if(div_word!=value_ing){hideajaxdiv();obj_div.innerHTML=;li_num=-1;return false;}
}
if(updown_run==false) false を返します。
if(li_num==-1)value_ing=value_ed;
if(Fun_key==40){
if(li_num<obj_div.firstChild.childNodes.length-2){
li_num++;
}それ以外{
li_num=-1;
}
}
if(Fun_key==38){
if(li_num>=0){
li_num--;
}それ以外{
li_num=obj_div.firstChild.childNodes.length-2;
}
}
if(li_num!=-1){
value_ed=obj_input.value=obj_div.firstChild.childNodes[li_num].childNodes[1].nodeValue;
}それ以外{
value_ed=obj_input.value=value_ing;
}
setlistyle();
}
バックグラウンド ajax.asp
次のようにコードをコピーします。
<%@LANGUAGE=VBSCRIPT コードページ=65001 %>
<%明示的なオプション%>
<%Response.CodePage=65001%>
<%Response.Charset=utf-8 %>
<!--#include file=conn.asp-->
<%
dimSift_value
dim SQL、Rs、I、Num
薄暗い定数
内容=
数値=10
Sift_value=replace(unescape(request.form(sift_value)),,)
Sql=上位の &Num& キーワードを選択し、&Sift_value&% のようなキーワードを ID 順に並べた検索から matchnum
set Rs=server.CreateObject(adodb.recordset)
Rs.open SQL,Conn,1,1
そうでない場合 (Rs.eof および Rs.bof)
I=0 から Num-1 の場合
Contant=Contant&'&rs(0)&,&rs(1)&'
ムーブネクスト
Rs.eof の場合は終了します
次
終了する場合
応答.書き込み(定数)
閉じる
Rs=何も設定しない
%>