サジェスト型入力支援
Googleサジェスト風入力支援サンプル。
テキストボックスに入力した文字に応じて、次々と候補の文字列が表示されます
＜手順＞
(1)onkeyupイベントにより、inputText()関数がコールされる。
(2)inputText()関数では、入力された値をURLエンコードして、XMLHttpRequestのGETデータとする。
(3)サーバ側のPHPプログラムでは、大文字小文字を区別せずに、候補となる国名をカンマ区切りで出力する。
PHPでは、<?php ?>前後の改行や空白なども出力されるため、先頭と末尾にもカンマを加える。
(4)JavaScriptプログラムでは、カンマで分割して各単語を出力する際に、最初と最後の単語を無視して出力する。
Internet Explorerの「オートコンプリート」機能を無効化するために、inputタグ(テキストボックス)で、autocomplete="off"と指定します。
PHPファイル
<![CDATA[
＜?php
mb_internal_encoding('UTF-8');
mb_http_output('UTF-8');
// 入力文字を取得
$text = $_GET['txt'];
if( empty($text) ) {
exit;
}
// 文字数
$len = strlen($text);
// 候補の文字列
$data = file_get_contents("data/country.dat");
$country = split('[,]', $data);
foreach($country as $value){
// 先頭文字と大文字と小文字の区別をせずに比較
if (strncasecmp( $value, $text, $len ) == 0) {
echo ",$value";
}
}
echo ",";
?>
]]>
Ajax
<![CDATA[
// テキストボックスのデータが変更された場合の処理
function inputText(target, result_id, url){
// テキストボックスの値を取得
var text = target.value;
// GETデータ
var data = 'txt=' + encodeURIComponent(text);
// リクエスト、コールバック関数にはtarget.id, result_idを引数に追加
new Ajax.Request(url,
{
method: 'get',
onComplete: function(req) {
checkData(req, target.id, result_id);
},
parameters: data
});
}
// レスポンスデータを取得
function checkData( req, target_id, result_id ){
// 出力先のトップ要素となるdiv要素
var topElem = document.getElementById(result_id);
// div要素の子要素クリア
deleteMenu(topElem);
// カンマで分割して各単語を取得
var words = req.responseText.split(',');
// 最初と最後の単語は無視し、各単語を出力
// (空白・改行文字など余分な文字を除く)
for(var i = 1; i < words.length-1; i++) {
// テキストノード作成
var text = document.createTextNode(words[i]);
// <a>要素作成
var aElem = document.createElement('a');
aElem.setAttribute("href",
"javascript:selected('"+words[i]+"', '"+target_id+"', '"+result_id+"')");
aElem.appendChild(text);
// <div>要素作成
var divElem = document.createElement('div');
// mouseover/mouseoutによるスタイルを設定
divElem.onmouseover = function (){
this.style.backgroundColor = "#AAA";
}
divElem.onmouseout = function (){
this.style.backgroundColor = "#EEE";
}
topElem.appendChild(divElem);
}
}
function selected(str, target_id, result_id){
// テキストボックスに値を入力
document.getElementById(target_id).value = str;
// 出力先のトップ要素となるdiv要素
var topElem = document.getElementById(result_id);
// div要素の子要素クリア
deleteMenu(topElem);
}
// トップ要素の子要素クリア
function deleteMenu(topElem){
var child = topElem.childNodes;
var length = child.length;
for(var i = 0; i < length; i++) {
topElem.removeChild(child[0]);
}
}
]]>
HTML
<![CDATA[
<form>
<div id="samlpe1">
国の名前（英語）を入力：
<input type="text" name="txt1" id="txt1" autocomplete="off" onkeyup="inputText(this,'result1','getCountry.php')"/>
</div>
<div id="result1"></div>
<p id="submit"><input type="submit" value="送信"/></p>
</form>
]]>
CVSファイル
<![CDATA[
Afghanistan,Albania,Algeria,American Samoa,Andorra,Angola,Anguill, (略)
]]>
