備忘録

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

関連記事

jQuery tooltipの備忘録

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

iMac再インストール

仕事で使っているiMacが動かなくなった 普段使っている各種ツールを起動するとフリーズするようになってしまった・・・ 特に何かをしたわけではないのに いろいろ探って復旧させるよりも、再インストールのほ …

Eclipse(IDE)のインストールについて

PHP関連の開発をメインに行なっていますが、 開発環境のEclipseのインストールについて簡単に手順を備忘録的に 1.Eclipseのダウンロード http://www.eclipse.org/do …

no image

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

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

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

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