※今回はVBは関係ありません。
今回はjQuery UI のお話。
公式サイトにあるオートコンプリートデモを触ってみてスゲーと思いましたが、
「あとちょっとこうだったら・・・」という部分があったので手を入れてみました。
具体的には以下のようなことをしたかったのです。

1.選択肢にないものが選べてはいけない。
2.入力値が完全でなくても候補が１つしかないのであれば、自動的にそれとみなす。

これに近いデモがコンボボックスによるオートコンプリートなのですが、
「2」はカバーできていないようです。
これに手を入れるにしても、scriptがやたら長いのでとてもじゃないがやりたくない。
というわけで「Custom data and display」のサンプルに手をいれて、「2」を実装してみました。

で、どうやって実装するか？なんですが、
・テキストボックスのロストフォーカスをフックする。
・入力値をもとにデータソースを検索、HIT数を調べる。
・HIT数が1なら、そのアイテムを選択したとする。
・HIT数が1以外なら、アイテムの選択はなかったものとする。
といういたってシンプルなもの。

実装結果はコレ

ポイントは
・ID、名前（漢字、ひらがな）で都道府県の検索ができる。
・選択候補が1つになったときにロストフォーカスすると、選択したとみなす。
・選択候補が1つでないときにロストフォーカスすると、入力値などが初期化される。

注意点としては、
・テキストボックス編集の有無にかかわらず、ロストフォーカスすると処理が走る。
・リストにないものは選べない。（当たり前ですが）
です。

以下、ソースコードベタ貼りとダウンロード。

続きを読む ...
　

※今回はVBは関係ありません。
jQueryの勉強がてらに表の表追加・削除サンプルを作成しましたので、ソースを載っけておきます。

ポイントは
・jQueryのバージョンは1.7.2
なお開発環境はVS2010、IE9。
・動的に追加したボタンは、live関数でないとイベントをフックできない
行を追加した時に動的に「-」ボタンを作っているので、
同ボタンのクリックイベントをフックするときに使用しました。
・セレクタに変数を使用
テーブルに追加する行の位置を求めるときに使用しました。

あたりでしょうか。

※イメージを出すため、商品名とか単価とか書いてありますが、検索機能や計算機能はありません。あしからず。

以下、仕様、ソースコードとダウンロード。

続きを読む ...
　

※今回はVBは関係ありません。
jQueryの勉強がてらに金種表入力サンプルを作成しましたので、ソースを載っけておきます。



仕様
・金種の数量を変更（change）すると、入力した金種の合計金額（横計）が計算されます。
また、全金種の合計金額（縦計）も計算されます。
・jQuery1.7.2を使用しています。該当スクリプトのファイルはGoogleAPIを参照しているため、本サンプルを実行するのに同ファイルを用意する必要はありません。
・動作検証はIE9のみです。他のブラウザでの動作保証はありません。

参考サイト
・jQuery日本語リファレンス
非常にわかりやすい。
特に「セレクターで要素を選択する」にある、「セレクター書式確認用ツール」はスゴイ！デバッグしやすくなりました。
ちなみに、同ツールを使って、先ほどのサンプルを「#CurrencySpecieDetails tbody tr」でセレクタを走らせると、このような結果になります。わかりやすい！


※実際はHITした件数を示すダイアログが出た後、HITした箇所に赤の目印が付きます。

・備考
HTMLはASP.NET MVC3 で生成されたものを流用しているため、命名規則がやたら長ったらしいですが、気にしないでください。


以下、ソースコードをべた張り。

続きを読む ...