備忘録

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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

iMac再インストール:Eclipseにテーマを適用

iMacの再インストールが終わりましたが 色々と環境設定が残っています。 今日は私が使っているIDEのEclipseにテーマを適用する方法の備忘録 Eclipseのエディターはデフォルトのままでは背景 …

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

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

MAC osx10.9 MavericksとiPhoneで地図情報を共有

osx10.9で「map」がmacにも追加されましたが、皆さんお使いですか? iPhoneをお持ちなら、PCで調べた情報を簡単にiPhoneと共有できます。 iPhoneの地図ソフトは「google …

Mac版 Google日本語入力の環境設定:不具合

仕事用のPCが不調のため、OSを再インストールしました。 MacBook 2009LATEを使用中ですが、全てのソフトウェアを再インストールしTimeMachineのバックアップデータを戻す作業をして …

no image

備忘録:jQueryのlive-clickがiPadで効かない

ちょっと忙しく、ブロクが更新できていませんが jQueryを利用してiPadでのウェブアプリケーションを開発中です。 そこで起こったちょっとした不具合 jQueryでlive:clickを使用した際に …