岩家.net

はじめに

お仕事始めようとしたらふと気になってしょうがなくなってきたので，書いてみました．

http://www.iwa-ya.net/labs/static/inputassister/

夕方にミーティングがあるのに何やってるんだろ．．．

概要

テキストボックスをフォーカスしたときに語のリストが表示され，そのうちのいずれかをクリックすると，クリックした語がテキストボックスに入力される，というだけのものです．

まぁそれだけではありきたりなので，対象のテキストボックスと表示する語のリストとの対応を簡単な記述で指定できるようにしてみました．

その記述について

inputassister.js （キタナイソース） をロード後，次のように記述します．

InputAssister.map = [
  { id: ‘input1′, list: [ 1, 2, 3, 4, 5 ] },
  { id: ‘input2′, list: [ ‘a’, ‘b’, ‘c’, ‘d’, ‘e’ ] },
  { id: ‘input4′, list: [ ‘ほげ’, ‘ふが’, ‘ぴよ’, ‘foo’, ‘bar’, ‘baz’ ] }
];
InputAssister.lister_id = ‘lister’;

InputAssister.map で，対象となるテキストボックスの id と表示させたい語のリストを指定します．複数の指定も可能です．上の例は，id="input1" なテキストボックスをフォーカスしたときに，「1 2 3 4 5」 という語のリストが表示される （そして，いずれかをクリックすると，その値がテキストボックスに入力される），というような設定となっています．

InputAssister.lister_id には，語のリストの表示先のボックスの id を指定します．上の例では，<div id="lister"></div> のようなブロックの中に，語のリストが表示されるような設定となっています．

ちなみに

表示される語は，それぞれ ref クラスな a タグ，<a class="ref">...</a>，で囲ってあります．（文章の意味的に li タグの方がいいのかな．．．？）

あと，要 prototype.js です．

今後

対象のテキストボックスの値を置き換えるかアペンドするかを指定できるようにしてみます．