Rhino

Rhino = Java実装のJavascript実行環境

その他の言語のJava実装は以下のものがある

Jython - port of Python.
JRuby - port of Ruby.
Rhino - port of ECMAScript.
Clojure - Lisp dialect.
Groovy - Scripting language for the JVM.
Scala - object-oriented, functional language for the JVM.

Macにinstallするには、brew installで一発。

2012/03/12 時点でinstallされるversionは1.7R3

brew install rhino

実行するには以下のjarを指定する。-eでコードを直接渡す。

% java -jar /usr/local/Cellar/rhino/1.7R3/libexec/js.jar -e "print('hello world!');"
java -jar /usr/local/Cellar/rhino/1.7R3/libexec/js.jar -e "print('hello worldjava -jar /usr/local/Cellar/rhino/1.7R3/libexec/js.jar');"
hello worldjava -jar /usr/local/Cellar/rhino/1.7R3/libexec/js.jar
%

インタラクティブシェルは以下の通りに実行できる

% java -jar /usr/local/Cellar/rhino/1.7R3/libexec/js.jar
Rhino 1.7 release 3 2011 05 09
js> print('hello world!');
hello world!
js>

Rhino

Node

http://nodejs.org/

こちらもJavascript実行環境。実装はV8だったりSpiderMondkeyだったり。

同じく、brew installにて。

% brew install node

npmと単体テストフレームワークもついでにinstall

% git clone git://github.com/creationix/nvm.git ~/.nvm
% nvm install v0.6.12
% nvm alias default v0.6.12
% source ~/.nvm/nvm.sh
% curl http://npmjs.org/install.sh | sh
% npm install nodeunit
% ln -s $HOME/.npm/nodeunit/0.7.4/package/bin/nodeunit $HOME/bin/nodeunit

• zsh on mac で nvm -> nvm_ls:17: no matches found: vdefault* 対処

スクロールバー付きサンプル

銀行名か金融機関コードで検索して、 入力補完してくれるサンプルを書いた

• jquery UI autocomplete スクロール付きサンプル
• jquery UI autocomplete スクロール付きサンプル(ソースコード)

ポイントは以下の通り

1. .ui-autocompleteクラスにmax-heightを指定することで、autocomplete部分のスクロールを実現
2. 候補がクリックされたときに、そのイベントを拾って、別フィールド2つにデータを補完
3. 別フィールドはreadonly属性で編集不可に
4. autocomplete optionにminLength=0を指定。入力がなくても、下キーで候補表示
5. suggestデータは、javascript内部にベタ書きで持っている。

• データ構造は、配列
• 配列の要素は、Hashで、valueというキーの値が検索対象となる
• value以外は、任意のキーを指定可能

同一suggestデータサンプル

こちらも、銀行名か金融機関コードで検索して、 入力補完してくれるサンプル。

前のサンプルと違う点は、2つのフィールドに対して、同一のsuggestデータを使っている

• jquery UI autocomplete 2つの検索フィールドサンプル
• jquery UI autocomplete 2つの検索フィールドサンプル(ソースコード)

ポイントは以下の通り

1. focusオプションで、候補にマウスオーバーした時点でデータを入れる(return false忘れずに)
2. 複数のフィールドに同一オプションでautocomplete登録

remote問い合わせsuggest

上記2つのサンプルは、挙動を理解しやすいようにするため、 サジェストするためのデータはコードに埋めたが、 remote API呼び出しも可能。

• jquery UI autocomplete 公式ドキュメント demo(remote API呼び出し)

上記のサンプルでは、jquery側空、search.phpというAPIを呼び出し、 APIがJSON形式のデータを返している。

APIは、GETのパラメータで"term"を受け取り、 それに基づくsuggestデータを返却している

http://jqueryui.com/demos/autocomplete/search.php?term=or

関連リンク

• jquery UI autocomplete 公式ドキュメント demo