重要 2015/12/1 に検証した結果、解説ページに使用されている jquery.ajax-combobox.js より、GitHub でダウンロードした jquery.ajax-combobox.js のほうが古い事が解りました。古いほうでは、解説ページに書かれている事の半分以上が動作しません。 http://www.usamimi.info/~sutara/ajax-combobox/dist/jquery.ajax-combobox.js をダウンロードする必要があります ※ UTF-8N です ※ jquery.ajax-combobox.min.js の日付はさらに古いので使え無いものと思われます最新バージョンに差し替えて、サブ項目のデモを追加しました
ここからは少し前の投稿 デモページ
作者さんの意図では、本来 ajax を使ってサーバー側のデータをリアルタイムに取得する事が目的のようですが、利用するには少し問題が多そうです。サーバー側の解説も無く、クライアント側の解説もそれほど明快なものではありません。 なので、最低限確実に動くサンプルを作成しました。サーバーと連携したい場合は単純に一括で ajax で必要な JSON を取得してから jquery.ajax-combobox に引き渡すといいでしょう。 ダウンロードページ 解説ページ デモで実行しているコード
var data = [{"社員コード":"0001","氏名":"浦岡 友也"},{"社員コード":"0002","氏名":"山村 洋代"},{"社員コード":"0003","氏名":"多岡 冬行"},{"社員コード":"0004","氏名":"高田 冬美"},{"社員コード":"0005","氏名":"内高 友之"},{"社員コード":"0006","氏名":"森尾 正也"},{"社員コード":"0007","氏名":"鈴杉 由樹"},{"社員コード":"0008","氏名":"川吉 洋樹"},{"社員コード":"0009","氏名":"村森 友恵"},{"社員コード":"0010","氏名":"杉岡 友一"},{"社員コード":"0011","氏名":"川多 由男"},{"社員コード":"0012","氏名":"杉岡 由樹"},{"社員コード":"0013","氏名":"木川 元男"},{"社員コード":"0014","氏名":"川木 春一"},{"社員コード":"0015","氏名":"中多 克也"},{"社員コード":"0016","氏名":"森村 正恵"},{"社員コード":"0017","氏名":"尾田 雅也"},{"社員コード":"0018","氏名":"松中 輝行"},{"社員コード":"0019","氏名":"野丸 由一"},{"社員コード":"0020","氏名":"松野 友之"},{"社員コード":"0021","氏名":"吉村 春一"},{"社員コード":"0022","氏名":"丸吉 春代"},{"社員コード":"0023","氏名":"松本 洋也"},{"社員コード":"0024","氏名":"尾木 輝男"},{"社員コード":"0025","氏名":"鈴川 春美"},{"社員コード":"0026","氏名":"原中 元美"},{"社員コード":"0027","氏名":"浦村 春一"},{"社員コード":"0028","氏名":"森木 和之"},{"社員コード":"0029","氏名":"多田 友行"},{"社員コード":"0030","氏名":"浦川 冬代"},{"社員コード":"0031","氏名":"岡中 冬之"},{"社員コード":"0032","氏名":"野尾 春男"},{"社員コード":"0033","氏名":"田杉 洋也"},{"社員コード":"0034","氏名":"村高 洋代"},{"社員コード":"0035","氏名":"本原 正也"},{"社員コード":"0036","氏名":"浦多 冬代"},{"社員コード":"0037","氏名":"鈴丸 輝之"},{"社員コード":"0038","氏名":"松高 洋一"},{"社員コード":"0039","氏名":"高松 雅之"},{"社員コード":"0040","氏名":"安村 克恵"},{"社員コード":"0041","氏名":"丸森 雅美"},{"社員コード":"0042","氏名":"中原 冬男"},{"社員コード":"0043","氏名":"原松 春也"},{"社員コード":"0044","氏名":"村松 冬子"},{"社員コード":"0045","氏名":"村松 和子"},{"社員コード":"0046","氏名":"尾内 正樹"},{"社員コード":"0047","氏名":"多松 正樹"},{"社員コード":"0048","氏名":"浦杉 由美"},{"社員コード":"0049","氏名":"原田 春代"},{"社員コード":"0050","氏名":"松丸 正恵"}];
$('#combo1').css({ "width": "350px" })
.ajaxComboBox(
data,
{
per_page: 20,
lang: 'ja',
button_img: 'ajaxcombobox/dist/btn.png',
primary_key: '社員コード',
field: '氏名',
order_by: [
'社員コード'
]
}
);
最初に幅を 350px に設定しているのは、これでしか横幅を指定できなかったからです。解説内に幅を狭くするような記述がありますが、コンボボックスそのものでは無いようです。 入力部分は自由に入力が出来、自動的に検索されます。無かった値で送信した場合は、INPUT の name 属性に従って普通に値が送られます。既に存在する値を選んだ場合は、name属性_primary_key にキー部分もセットされます。 入力した値で検索されますが、スペースで区切ると AND 検索になります。オプションで OR 検索に変更する事も可能です order_by プロパティでは、複数項目が指定可能で、DESC 文字列を使用できます( これについては、解説ページに記述されています )order_by: [ '社員コード DESC' ]キーアクション 入力部分とボタン部分でリストが開いて無い時に下矢印キーを使うとリストが開き、開いている時は、ESC や TAB で閉じます また、開いている時には左右の矢印キーで1ページづつ移動でき、SHIFT+矢印キー で、先頭・最後に移動可能です。 関連する記事 jquery.ajax-combobox で JSON をデータに使う場合、複数項目を検索対象にする為の簡単な改造
|
|
【IFRAME パッケージの最新記事】
- CSS の calc 関数を使って、IFRAME を画面下半分にフィットさせる
- jQuery プラグイン : Columns と PHP の連携と、ドキュメントには書かれていないカスタマイズ方法
- １会話・IFRAME(TCPDF)テンプレート : jQuery + Bootstrap(css) + mmenu + Firebase + TCPDF + PHP
- jquery.ajax-combobox で JSON をデータに使う場合、複数項目を検索対象にする為の簡単な改造
- FileSaver.js と canvas-toBlob.js を使って、canvas で表示されているイメージを保存する
- クリックしたコンテンツ以外を暗転する jQuery TOOLS の expose プラグイン
- tabIndent.js : テキストエリアでタブが使用できます。オリジナルを少し改造して、jQuery の名前空間に登録しました。
- 何もかも回転する、jQuery の簡単なプラグイン実装
- jQuery UI の タブ と アコーディオンで、スキンのチェック
- tableMagic で作成されたテーブルを fixedheadertable でヘッダと左端列を固定 / jQuery プラグイン
- jQuery : Columns で作成されたテーブルを fixedTblHdrLftCol でヘッダと左列を固定( CSS カスタマイズ )
- IOS のようなスクロールバーインターフェイスを jQuery のプラグインとして実現する jQuery.NiceScroll
- jQuery : 一つの 複数選択の SELECT 要素から二つのリストボックスを作成して、必要なグループ選択するプラグイン / multiselect.js と PHP との連携
- jQuery プラグイン mmenu( 左右からスライドインするメニュー ) を F1 キーと F2 キーに割り当てて、左右から二つのメニューを開く
- jQuery で、ページ内で F1 キー(HELP) を起動させないようにする / IFRAME 内も同時対応
- FRAME の代替として使う IFRAME パッケージ
