備忘録

jquery:autocompleteの改造

投稿日:2011年11月19日 更新日:

久々の更新です。個人的な備忘録なので、あしからず・・・(こうやったほうが、良いよ!!というご意見はどしどしください)

最近はjqueryを表示に重宝しています。
仕事柄、WEBシステムの管理画面を多く作るのですが、マスターデータを参照してIDを取得したいことが多々あります。
HTMLのselectを利用してコンボボックスを作ってもいいのですが、選択肢が大量にある場合探せないし、と言ってpopupウィンドウで選択させるのも・・・

そこで、jqueryのautocompleteを利用して、隠し項目にidをセットする方法が取れないか

すなわち、autocompleteで情報を取得して、入力フィールドには名称を隠し項目にIDをセットする方法を模索しました

結構簡単でしたが、忘れないようにメモしておきます。

まず、autocompleteを呼び出すときにオプションを追加しました。オプションの名称はなんでも良かったのですがここでは”idInput”としました。

呼び出し方は

$('#id').autocomplete('url', {
	onItemSelect : selectItem,
	onFindValue : findValue,
	formatItem : formatItem,
	idInput : "chirashi_place"
});

idInput : “chirashi_place”の部分を追加、でautocomplete..jsは以下の部分を修正しました。
function selectItem()の$input.val(v);の部分を

var idInput = options.idInput;
if(idInput!=""){
	listData = v.split(":");
	$('#'+idInput).val(listData[0]);
	$input.val(listData[1]);
}else{
	$input.val(v);
}

更に呼び出しているスクリプトからの戻り値を「”値”\n”値”\n”値”\n”値”\n”値”\n”値”\n”値”」だったものを「”id:値”\n”id:値”\n”id:値”\n”id:値”\n”id:値”\n”id:値”\n”id:値”」に変更して対応完了です。

細かい処理は割愛してあります。
再選択した際に、隠し項目のidをクリアするとか、これだけでは上手くいかないことも多いかと思いますが・・・

とりあえず

ad

ad

-備忘録
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

スパム対策 * Time limit is exhausted. Please reload the CAPTCHA.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

Stinger3カスタマイズ 一覧系ページのショートコードに関する不具合

ブログの構築を行っている途中に気がついた不具合を修正しました エントリ一覧系のページで本文の一部が表示されていますが、Wordpressのショートコードが消えずにそのまま表示されている不具合が有りま …

jQuery tooltipの備忘録

Concrete5の外部フォームの記事は業務多忙の為、遅れています。期待している方がもしもいらっしゃったらばすみません・・・ 今日はjQueryのtooltipに関する備忘録です。 jQueryのto …

備忘録:Facebookページで「いいね」がクリックされているかどうかを判定

あけましておめでとうございます。 本年もよろしくお願いいたします。 昨年は様々なことが有りました。良いことも、悪いことも・・・今年は悪いことがないように願いたいものです。 さて、年末年始休暇中にFac …

PHP:ソケット通信サーバ・テスト用シミュレータの作成

久々にPHPでソケット通信アプリを開発してます。WEBシステムで管理ページを開発し、設定内容をDBではなくSocket通信でアプリケーションに渡すというものです。 通知先のアプリケーションは開発環境に …

使い勝手の良いアクセス解析 Research Artisan Lite

備忘録です。 アクセス解析ソフトはいろいろありますが 最近のデフォルトは 「Google Analytics」 + 「Research Artisan Lite(非改造)」 ひとまず十分な感じ Res …