 |
 |
 |
|||||||||||||
|
●Ajaxでsuggest(入力補完)●
Ajaxでsuggest(入力補完)を作成する機会があったのでちょこっと紹介します。
それとXMLHTTPRequestは日本語をそのまま送信すると文字化けすることがありますので、
またXMLHTTPRequestはUTF8でデータを送信するので他の文字コード環境の場合文字化けを起こします。
※また今回は補完候補リストを郵便番号と住所、補完候補リストの保存形式をテキストとして説明していきます。 ■complete.jsの改良
complete.jsは
今回アレンジする点は
------------------------------------------------------------------------------
function createXmlHttpRequest() {
var xmlhttp = false;
if( window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if(window.ActiveXObject) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlhttp;
}
var oldquery = "";
var xmlhttp = 0;
var input = 0;
function peekQuery (type,vid,nid,src) {
if (! xmlhttp) xmlhttp = createXmlHttpRequest();
if (! xmlhttp || xmlhttp.readyState == 1 ||
xmlhttp.readyState == 2 || xmlhttp.readyState == 3){
return;
}
var textbox = document.getElementById(vid);
var textbox2 = document.getElementById(nid);
var query = EscapeUTF8(textbox.value);
if (query == "") {
textbox.clearCompletionItems();
textbox2.value = "";
} else if (oldquery != query) {
xmlhttp.open("GET", src + "?TYPE=" + type + "&KEY=" + query, true);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200
&& xmlhttp.responseText != "") {
var ary = xmlhttp.responseText.split(/\n/);
textbox.showCompletionItems(
ary,
function(n) {
ary[n] = ary[n].replace(/<font color=red>/g,"");
ary[n] = ary[n].replace(/<\/font>/g,"");
var new_ary = ary[n].split(":");
if (type == 1) {
textbox2.value = new_ary[0];
textbox.value = new_ary[1];
} else {
textbox2.value = new_ary[1];
textbox.value = new_ary[0];
}
textbox.clearCompletionItems();
oldquery = EscapeUTF8(textbox.value); } );
}
}
xmlhttp.send(null)
}
oldquery = query;
}
function suggestOn(t,iid,oid,src) {
var textbox = document.getElementById(iid);
initCompletion(textbox);
TimerID = setInterval(
function () { peekQuery(t,iid,oid,src); },
500);
}
function suggestOff(iid) {
clearInterval(TimerID);
DTimerID = setInterval(
function () {
var textbox = document.getElementById(iid);
textbox.clearCompletionItems();
clearInterval(DTimerID); },
200);
}
------------------------------------------------------------------------------
■補完候補リストの作成 ※補完候補リストのフォーマットは「○○○:△△△」という形式になります。 [post.txt]------------------------------------------------------------------------------ 1000001:東京都千代田区 1000002:東京都千代田区皇居外苑 1000003:東京都千代田区一ツ橋 ・ ・ ・ ------------------------------------------------------------------------------※データベース(MYSQL等)を使ってリスト化すれば候補一覧の表示がスムーズになります。 ■補完候補を出力するスクリプト
スクリプト自体はCGIでもphpでもなんでもよいです。
※「TYPE」は入力した文字列の検索対象を指定した値が格納されています。
» TYPEが0だった場合はセパレータ「:」より前の文字列を対象に検索します。 ※「KEY」は入力した文字列が格納されています。 ※今回は補完候補の検索にphpスクリプト(実際の検索はUNIXシェル)を使用します。 [suggest.php]
------------------------------------------------------------------------------
<?php
$FILE = './post.txt';
$TYPE = "";
$KEY = "";
$ARY = array();
$CNT = 0;
if (isset($_GET['TYPE'])) {
$TYPE = $_GET['TYPE'];
}
if (isset($_GET['KEY'])) {
$KEY = $_GET['KEY'];
}
//不要な文字列の除去
$KEY = preg_replace("/[a-zA-Z\/\;\&\|]/g","",$KEY);
//郵便番号で検索
if ($TYPE == 0) {
//検索開始
$ARY = split("\n",shell_exec("/bin/cat $FILE | /bin/grep '^$KEY'"));
foreach ($ARY as $VAL) {
if ($VAL != "") {
list($NUM,$NAME) = split(":",$VAL,2);
if (preg_match("/^$KEY/",$NUM)) {
//文字列にマッチした部分を赤で強調
$NUM = preg_replace("/^$KEY/","<font color=red>$KEY</font>",$NUM);
print $NUM . ':' . $NAME . "\n";
$CNT++;
}
if ($CNT == 30) { //補完候補が30件になったら終了
break;
}
}
}
}
//住所で検索
else if ($TYPE == 1) {
//検索開始
$ARY = split("\n",shell_exec("/bin/cat $FILE | /bin/grep ':$KEY'"));
foreach ($ARY as $VAL) {
if ($VAL != "") {
list($NUM,$NAME) = split(":",$VAL,2);
if (preg_match("/^$KEY/",$NAME)) {
//文字列にマッチした部分を赤で強調
$NAME = preg_replace("/^$KEY/","<font color=red>$KEY</font>",$NAME);
print $NUM . ':' . $NAME . "\n";
$CNT++;
}
if ($CNT == 30) { //補完候補が30件になったら終了
break;
}
}
}
}
?>
------------------------------------------------------------------------------
■ページに設置する
[HEADER]
[BODY]
» POST*は郵便番号入力フォームを指しています。 ■動作サンプル ------------------------------------------------------------------------------
上記で説明したサンプルスクリプト等を以下に置いておきます。
|
|
|||||||||||||
 |
|
 |