超メモ帳（Web式）＠復活

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

'); } });

SPONSORED LINK

トップ > 技術的な話題 > suggest.js激闘篇

suggest.js激闘篇

技術的な話題 技術的な話題-ajax

SPONSORED LINK

*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>'); var adsenseCode2 = (function () {/*

SPONSORED LINK

'); if($target_post.parents("div.hatena-asin-detail").is("*")) { $target.eq(adInsertPosition.position -1).before(adContainer); } else { $target_post.before(adContainer); } } }); window.addEventListener("load", function() { adInsertPositions.forEach(function(adInsertPosition) { if(adInsertPosition.condition === undefined || adInsertPosition.condition) { $('.' + adInsertPosition.containerClass).html(adInsertPosition.adCode); } }); }, false); });

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>


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

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