(デモ)jquery.ajaxComboBox.4.2.js

2012/01/11

=> English version

サーバサイド : PHP5
DB : SQLite2
文書宣言 : HTML5

基本的な使い方
サブ情報を表示
セレクト専用
1. 基本
2. 送信する値のカラムを変更
初期値設定
1. 基本
2. セレクト専用
データベースではなく、JSON形式のデータを検索する
1. 基本
候補選択と同時に、別のイベントを発火する
1. 基本
2. フォームタグで囲んでいない場合

基本的な使い方

基本

第1引数にAjax送信先のファイル名を、
第2引数にオプションを設定します。

都道府県:


  $('#ac01_01').ajaxComboBox(
    'acbox/php/ajaxComboBox.php',
    {
      'db_table'    : 'prefectures',
      'order_field' : 'id'
    }
  );

候補リスト・隣接ページの表示数を変更

"per_page"オプションで、候補リストの表示数を、
"navi_num"オプションで、隣接ページの表示数を変更できます。

人名:


  $('#ac01_02').ajaxComboBox(
    'acbox/php/ajaxComboBox.php',
    {
      'db_table'    : 'users',
      'per_page'    : 20,
      'navi_num'    : 10,
    }

ページナビをシンプルに

ComBoxの幅をできるだけ狭くしたい場合、"navi_simple"オプションで
先頭・末尾のページへのリンクを非表示にできます。
なお、キーボードのショートカットは有効のままです。(Shift + 右・左)

人名:


  $('#ac01_03').ajaxComboBox(
    'acbox/php/ajaxComboBox.php',
    {
      'db_table'    : 'users',
      'navi_num'    : 1,
      'navi_simple' : true
    }

複数のフィールドから検索

カンマ区切りでフィールド名を指定することで、
同じテーブルの中の複数のフィールドから検索できます。
試しに、下のボックスに『23』と入力してみてください。

都道府県(name, id両方で検索):


  $('#ac01_04').ajaxComboBox(
    'acbox/php/ajaxComboBox.php',
    {
      'db_table'    : 'prefectures',
      'search_field': 'name, id'
    }
  );

OR検索へ切り替える

スペース区切りで複数の言葉で検索した場合、
デフォルトではAND検索となりますが、OR検索にすることもできます。
試しに、下のボックスに『道島』と入力してみてください。

都道府県:


  $('#ac01_05').ajaxComboBox(
    'acbox/php/ajaxComboBox.php',
    {
      'db_table'    : 'prefectures',
      'and_or'      : 'OR'
    }
  );

▲ 目次へ

サブ情報を表示

同一名の候補がある場合、右側にサブ情報を表示させて
それぞれを区別することができます。

基本

"sub_info"オプションを真にするだけです。

社員名:


  $('#ac02_01').ajaxComboBox(
    'acbox/php/ajaxComboBox.php',
    {
      'db_table'    : 'employee_ja',
      'sub_info'    : true
    }
  );

表の項目名を変更

何も設定しないと、サブ情報の表の項目名は、データベースの
カラム名が表示されてしまいます。
"sub_as"オプションで、表示名を変更できます。

社員名:


  $('#ac02_02').ajaxComboBox(
    'acbox/php/ajaxComboBox.php',
    {
      'db_table'    : 'employee_ja',
      'sub_info'    : true,
      'sub_as'      : {
        'id'       : '社員番号',
        'post'     : '部署',
        'position' : '役職'
      }
    }
  );

サブ情報の表示カラムの設定

"show_field"オプションで設定します。
カンマ区切りで、複数のカラム名を指定します。
オプションでの記述の順番でカラムを取得します。

社員名:


  $('#ac02_03').ajaxComboBox(
    'acbox/php/ajaxComboBox.php',
    {
      'db_table'    : 'employee_ja',
      'sub_info'    : true,
      'sub_as'      : {
        'post'     : '部署',
        'position' : '役職'
      },
      'show_field'  : 'position,post'
    }
  );

サブ情報の非表示カラムの設定

"hide_field"オプションで設定します。
複数のカラムを取得する場合の記述のルールは
"show_field"オプションと同じです。

社員名:


  $('#ac02_04').ajaxComboBox(
    'acbox/php/ajaxComboBox.php',
    {
      'db_table'    : 'employee_ja',
      'sub_info'    : true,
      'sub_as'      : {
        'id'       : '社員番号'
      },
      'hide_field'  : 'position,post'
    }
  );

サブ情報を他で利用する

候補を選択した際、
テキストボックスの『sub_info』という独自の属性に
JSON形式でサブ情報が格納されるので、他で利用することが可能です。

社員名:


  var result = 'サブ情報\n';
  var json = $('#ac_02_05').attr('sub_info');
  var obj = eval( '(' + json + ')' );
  for(var key in obj){
    result += key + ' : ' + obj[key] + '\n';
   } 
  alert(result);

▲ 目次へ

セレクト専用

基本

リストからの選択しか受け付けません。
リストにない値を入力した場合、また、選択後に
文字列を削除・追加した場合、入力エリアが赤くなります。

社員名:


  $('#ac03_01').ajaxComboBox(
    'acbox/php/ajaxComboBox.php',
    {
      'db_table'    : 'employee_ja',
      'sub_info'    : true,
      'select_only' : true
    }
  );

なお、このオプションを設定すると、フォームで送信されるのは
"primary_key"オプションで設定したカラムの値になります。この値は、候補リストの<li>要素のid属性にもなります。

テキストボックスと同じname属性を持つ隠しフィールド(hidden)を
生成し、リストから選択した場合のみ、"primary_key"の値を
hiddenのvalue属性に設定しています。


		//テキストボックス
		<input id="ac03_01" name="ac03_01_1" type="text" />

		//候補リスト
		...
		<li id="A014" class="">佐藤</li>
		<li id="A011" class="ac_over">佐藤</li>
		<li id="A008" class="">佐藤</li>
		...

		//隠しフィールド
		<input type="hidden" name="ac03_01" value="A011"/>

送信する値のカラムを変更

セレクト専用時のデフォルトでは、データベースのテーブルの
"id"カラムを探し、その値をフォーム送信に用います。
これを、"primary_key"オプションで変更することができます。

都道府県:


  $('#ac03_02').ajaxComboBox(
    'acbox/php/ajaxComboBox.php',
    {
      'db_table'    : 'prefectures',
      'order_field' : 'id',
      'show_field'  : 'id',
      'sub_info'    : true,
      'select_only' : true,
      'primary_key' : 'name'
    }
  );

▲ 目次へ

初期値設定

ComboBoxに初期値を設定します。

基本

都道府県:


  $('#ac04_01').ajaxComboBox(
    'acbox/php/ajaxComboBox.php',
    {
      'db_table'    : 'prefectures',
      'order_field' : 'id',
      'init_val'    : '東京都'
    }
  );

セレクト専用

都道府県:


  $('#ac04_02').ajaxComboBox(
    'acbox/php/ajaxComboBox.php',
    {
      'db_table'    : 'prefectures',
      'order_field' : 'id',
      'select_only' : true,
      'primary_key' : 'id',
      'init_val'    : 13
    }
  );

▲ 目次へ

データベースではなく、JSON形式のデータを検索する

データベースもサーバサイド言語も使わず、JSON形式のデータを検索します。
JSON形式のデータは、下記のようなオブジェクト配列にする必要があります。


var data = [
	{'id':'A001','name':'田中','post':'営業部','position':'一般'},
	{'id':'A002','name':'佐藤','post':'営業部','position':'一般'},
	{'id':'A003','name':'鈴木','post':'総務部','position':'係長'},
	{'id':'A004','name':'佐藤','post':'総務部','position':'課長'},
	...
];

基本

Ajax通信するサーバサイドのファイル名の代わりに、
JSON形式のオブジェクト配列を指定します。

社員名:


  $('#ac05_01').ajaxComboBox(
    data,
    {
      'sub_info'    : true,
      'sub_as'      : {
        'id'       : '社員番号',
        'post'     : '部署',
        'position' : '役職'
      },
      'select_only' : true,
      'init_val'    : ['A009'],
      'primary_key' : 'id'
    }
  );

▲ 目次へ

候補選択と同時に、別のイベントを発火する

基本

『bind()』メソッドを使うことで、候補選択直後に何らかの処理を実行することができます。

都道府県名:


  $('#ac06_01').ajaxComboBox(
    'acbox/php/ajaxComboBox.php',
    {
      'db_table'    : 'prefectures',
      'order_field' : 'id',
      'bind_to'     : 'foo'
    }
  )
  .bind('foo', function(){
    alert($(this).val() + ' が選択されました');
  });

フォームタグで囲んでいない場合

テキストボックスをフォームタグで囲まず、Enterキーが押された場合の
イベントハンドラを独自に用意している場合、候補をEnterキーで選ぶと
イベントが重複して実行されてしまいます。
それを防ぐため、プラグインの独自イベントが発火する際に、
Enterキーで候補が選ばれた場合はtrueとなる引数を追加しました。

都道府県名:


  $('#ac06_02').ajaxComboBox(
    'acbox/php/ajaxComboBox.php',
    {
      'db_table'    : 'prefectures',
      'order_field' : 'id',
      'bind_to'     : 'foo'
    }
  )
  .bind('foo', function(e, is_enter_key){
    if(!is_enter_key){
      alert($(this).val() + ' が選択されました(マウスで選択)');
    }
  })
  .keydown(function(e){
    if(e.keyCode == 13) alert($(this).val() + ' が選択されました(Enterキーで選択)');
  });

▲ 目次へ

Author : sutara_lumpur / Blog / Twitter / mail address