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>
これで一応動くことには動くんだけど･･･。一番後ろに＠がついてしまう。
なんかもっとスマートな方法がありそうなんだが。。
