javascript‎ > ‎

Google サジェストを組み込む（サーバーサイドにPHP）

2010/11/08 3:29 に いつかはちょうになる が投稿   [ 2010/11/08 3:37 に更新しました ]
Google の補完サービス、Googleサジェストを組み込む方法について記載します。動作させるにはJavascriptとPHPを利用しています。Javascriptだけでも利用できますが、ブラウザのセキュリティ強化によって使えなくなるのは困るのでサーバー側でデータを取得する方法にしています。また、クライアントスクリプトのライブラリとしてPrototype.jsを使っています。

Javascript
var mTemplateHeader ='<table style="width:100%;">';
var mTemplateRecord ='<tr>'
+'<td style="padding:4px;cursor:hand;" onclick="fSuggestSelectItem(\'#TEXT#\');" onmouseover="fSuggestOnMouseOver(this);" onmouseout="fSuggestOnMouseOut(this);">'
+'#TEXT#'
+'</td>'
+'</tr>';
var mTemplateFooter='</table>';
var mSuggest;
var mSuggestTarget;

function fSuggestOnMouseOver(s){
s.style.backgroundColor="#EEEEEE";
}
function fSuggestOnMouseOut(s){
s.style.backgroundColor="#FFFFFF";
}
/*
サジェストのレスポンス処理
取得したXMLデータを解析してHTMLで表示する
*/
function fSuggestShowResponse(originalRequest)
{
if (!mSuggest){
var o=$(mSuggestTarget);
var offsetTop = 0;
var el = o;
if (Prototype.Browser.IE){
offsetTop=0;
do {
offsetTop += el.offsetTop || 0;
el = el.offsetParent;
} while (el);
}else{
offsetTop=o.offsetTop;
}
var offsetLeft = 0;
var el = o;
if (Prototype.Browser.IE){
offsetLeft=0;
do {
offsetLeft += el.offsetLeft || 0;
el = el.offsetParent;
} while (el);
}else{
offsetLeft=o.offsetLeft;
}
mSuggest=document.createElement("div");
mSuggest.style.position="absolute";
mSuggest.style.border="solid 1px gray";
mSuggest.style.left=(offsetLeft)+"px";
mSuggest.style.top=(o.offsetHeight+offsetTop)+"px";
mSuggest.style.width=(o.offsetWidth)+"px";
mSuggest.style.backgroundColor="#FFFFFF";
o.parentNode.appendChild(mSuggest);
}
var xml=originalRequest.responseXML;
var CompleteSuggestions=xml.getElementsByTagName("CompleteSuggestion");
var mhtml="";
var imax=CompleteSuggestions.length;
if (imax==0){
}else{
for (var i=0; i<imax; i++){
var suggestions=CompleteSuggestions[i].getElementsByTagName("suggestion");
var t=suggestions[0].getAttribute("data");
mhtml+=mTemplateRecord.replace(/#TEXT#/g, t);
}
}
mSuggest.innerHTML=mTemplateHeader+mhtml+mTemplateFooter;
}
/*
ターゲットがフォーカスをロストした際に呼び出される
*/
function fSuggestFin(){
setTimeout(fSuggestClose, 250);
}
/*
サジェスト非表示
*/
function fSuggestClose(){
if (mSuggest){
mSuggest.innerHTML="";
var o=$(mSuggestTarget);
o.parentNode.removeChild(mSuggest);
mSuggest=undefined;
}
}
/*
サジェスト初期値設定
*/
function fSuggest(id){
mSuggestTarget=id;
var o=$(mSuggestTarget);
if (o.addEventListener){
o.addEventListener('blur', fSuggestFin, false);
} else if (o.attachEvent){
o.attachEvent('onblur', fSuggestFin);
}
}
/*
入力されている文字を送信してサジェストの候補リストを取得する
*/
function fSuggestSubmit(){
var url="http://localhost/sample/index.php";
var pars="p="+encodeURI($(mSuggestTarget).value);
var myAjax = new Ajax.Request(
url, 
{
method: 'post', 
parameters: pars, 
onComplete: fSuggestShowResponse
});
}
/*
キー入力があった際に表示される
*/
function fSuggestOnChange(){
fSuggestSubmit();
}
/*
サジェストが選択されたときの処理
選択された文字をテキストへ入れる
*/
function fSuggestSelectItem(v){
var o=$(mSuggestTarget);
o.value=v;
fSuggestClose();
}
/*
サジェスト初期設定
*/
window.onload=function(){
fSuggest("in_text");
}

HTML
<div>
<input type="text" id="in_text" value="" onkeyup="fSuggestOnChange();" />
<input type="button" id="in_submit" value="検索" />
</div>


参考にしたサイト
 参考 http://code.google.com/intl/ja/more/
 PHP で HTTP リクエスト
 
 参考 http://u823.net/wordpress/archives/330
 ie だけ表示位置がおかしい、offsetTopの値を取得
 
 参考 http://phpspot.org/blog/archives/2007/04/javascriptie1.html
 ie かどうかの判別

ċ
index.html
(4k)
いつかはちょうになる,
2010/11/08 3:36
v.2
ċ
index.php
(2k)
いつかはちょうになる,
2010/11/08 3:36
v.2
Comments