超メモ帳(Web式)@復活

小説書いたり、絵を描いたり、プログラムやったりするブログ。統失プログラマ。


SPONSORED LINK

suggest.js激闘篇

suggest.js - 入力補完ライブラリ


suggest.jsはgoogleサジェストのような入力補完を補助してくれるjavascriptライブラリである。


ここ数日、suggest.jsをつかって携帯メールフォームの「@」以降の補完を作れないかなと思い格闘している。

prototype.jsのForm.Element.Observerつかって、フォームに入力される値を監視しておいて、「@」が入力されたら配列を代入するような。。

前略(CSS設定、prototype.js、suggest.js設定までは公式サイト例と同じ)
---------------------------------------------------------------------

<script type="text/javascript" language="javascript">
<!--
// 補完候補の配列作成
var list = [];
var flag = 0;
var suggest;

// wondowのonloadイベントでSuggestを生成
Event.observe(window,
        'load',
        function(){
            suggest =new IncSearch.SuggestTag("text", "suggest", list, 
                {dispAllKey: true, prefix: true});
        },
false);

//textフォームを監視
window.onload = function(){
    new Form.Element.Observer($('text'),1,
        function(){
            if($("text").value.indexOf("@",0) != -1 && flag == 0)
            {
                list.clear;
        list = [ 'docomo.ne.jp', 'ezweb.ne.jp', 
             'q.vodafone.ne.jp', 'softbank.ne.jp']; 
        flag = 1;
      }
        }
    );
}
//-->
</script>
</head>
<body>
<input id="text" type="text" name="pattern" value="" autocomplete="off" 
size="40" style="display: block"/>
<!-- 補完候補を表示するエリア -->
<div id="suggest"></div>
</body>
</html>


動かん。というか動くわけがないのか?

suggest.jsのcandidateListあたりを弄れば動きそうなんだが。。

もーつかれました。


2006/11/02 12:32:54*追記

<script type="text/javascript" language="javascript">
<!--
// 補完候補の配列作成
var list = [
                [],
                ['docomo.ne.jp', 'ezweb.ne.jp', 'q.vodafone.ne.jp', 'softbank.ne.jp']
           ];
var flag = 0;

// wondowのonloadイベントでSuggestを生成
Event.observe(window,
              'load',
              function(){
                    var suggest =new IncSearch.SuggestTag("text", "suggest", list[flag],{delim: "@"});
                                                    
                    new Form.Element.Observer($('text'),1,
                        function(){
                            if($("text").value.indexOf("@",0) != -1 && flag == 0)
                            {
                                alert('ok');
                                flag = 1;
                                suggest.candidateList = list[flag];
                            }
                        }
                    );
              },
false);
//-->
</script>


これで一応動くことには動くんだけど・・・。一番後ろに@がついてしまう。

なんかもっとスマートな方法がありそうなんだが。。

プライバシーポリシー免責事項