root/lang/actionscript/todoshare/nohada.cgi @ 16259

#!/usr/bin/perl

BEGIN {
  push @INC,"perl";
}
use strict;
use CGI::Carp qw(fatalsToBrowser);
use Html;
use HtmlTag;
use Obj;
header;

my $scr=<<'EOF';

function doFocus(target) {
  var tName=target.id;
  var val=function (name) {
    return (name==tName?["*"]:["like",$(name).value+"%"]);
  }
  var list=[
     "FINDREL" ,
     val("obj"),
     val("name"),
     val("val")
  ];
  
  $("test").innerHTML=Object.toJSON(list);
  get(list,function(data) {
     var cand=data.map(function (e) {
         return e[tName];
     }).sort().uniq();
     $("test").innerHTML=cand.length;
     if (cand.length==1) {$(tName).value=cand[0];}
     else {sugs[tName].candidateList=cand;}
  });
}
function get(cmd,onComplete) {
   new Ajax.Request("db.cgi", {
                method: "put",
                parameters: 'cmd='+encodeURI(Object.toJSON(cmd)) ,
                onSuccess:function(httpObj){
                   //alert(httpObj);
                   //alert(httpObj.responseText);
                   try {
                     onComplete( httpObj.responseText.evalJSON() );
                   } catch(e) {$("test").innerHTML=e;}
                   //$("test").innerHTML=httpObj.responseText;
                   
                },
                onFailure:function(httpObj) {
                   $("test").innerHTML=httpObj.responseText;
                }
   });
}

var sugs=[];
function init(id) {
   sugs[id]= new Suggest.Local(
             id, id+"_suggest",[id,id+"!"],
             {dispAllKey: true});   
} 
var start = function(){
   init("obj");
   init("name");
   init("val");
};
function () {   
              var suggest = new Suggest.LocalMulti("obj", "suggest",
               list[0/*document.getElementById('select').selectedIndex*/], {dispAllKey: true});
              /*var select = document.getElementById('select')
              var change = function(){
                suggest.candidateList = list[select.selectedIndex];
              };
              select.addEventListener ?
                select.addEventListener('change', change, false) :
                select.attachEvent('onchange', change);*/
};
window.addEventListener ?
  window.addEventListener('load', start, false) :
  window.attachEvent('onload', start);

EOF
my $style=<<'EOF';
div.suggest {
    position: absolute;
    background-color: #FFFFFF;
    border: 1px solid #CCCCFF;
    font-size: 90%;
    width: 200px;
}
div.select{ /* キー上下で選択した場合のスタイル */
    color: #FFFFFF;
    background-color: #3366FF;
}
div.over{ /* マウスオーバ時のスタイル */
    background-color: #99CCFF;
}
EOF


&Html::p(
  [html,
    [head,
      [title,"のはだ"],
      script(src=>"prototype.js"),
      script(src=>"suggest.js"),
      [script,$scr],
      [style,$style],
    ],
    [body,[center,
      [table,"\n",
        &area("obj","の"),"\n",
        &area("name","は"),"\n",
        &area("val","だ"),"\n",
      ],"\n",
      [button(onClick=>"test()"),"OK"],[div(id=>"test"),"test"]
    ]]
  ]
);

sub area {
  my ($id,$tail)=@_;
  [&tr,
       [td,
            input(id=>$id,type=>"text",name=>$id,size=>50
                  ,onFocus=>"doFocus(this)", autocomplete=>"off" ),
            $tail,
            div(id=>"$id\_suggest",class=>"suggest")]
  ];
}