jquery.ajaxComboBox.7.1.js

Basic usage 基本的な使い方

Basic 基本

First parameter => File name transmitted by Ajax
Second parameter => Options

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

Nation: 国名:


  $('#ac01_01').ajaxComboBox(
	'acbox/jquery.ajaxComboBox.php',
	{
	  lang        : 'en',
	  db_table    : 'nation'
	}
  );

The number of displays of the list and page is changed. 候補リスト・隣接ページの表示数を変更

"per_page" option => The number of displays of lists is changed.
"navi_num" option => The number of page is changed.

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

Name: 人名:


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

Simple Page-navi ページナビをシンプルに

Please set "navi_simple" option when you want to narrow
the width of the ComboBox as much as possible.

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

Name: 人名:


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

Search for several fields 複数のフィールドから検索

Set several fields for "search_field" option.
Please input "23" to the following box.

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

Nation (name, id): 国名 (name, id):


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

Change from "AND" to "OR" OR検索へ切り替える

You can change the type of search from "AND" to "OR".
Please input "ame ja" to the following box.

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

Nation: 国名:


  $('#ac01_05').ajaxComboBox(
	'acbox/jquery.ajaxComboBox.php',
	{
	  lang        : 'en',
	  db_table    : 'nation',
	  and_or      : 'OR'
	}
  );

The rule of order 並べ替えの規則を決める

Basically, it is arranged by "search_field" option.
You can also arrange it by "order_by" option.

基本的には、"search_field"オプションに指定されたフィールドの昇順に並べ替えられます。
"order_by"オプションで任意に指定することもできます。

Nation: 国名:


  $('#ac01_06').ajaxComboBox(
    'acbox/jquery.ajaxComboBox.php',
    {
      lang        : 'en',
      db_table    : 'nation',
      field       : 'name',
      order_by    : [
        'modified DESC',
        'created'
      ]
    }
  );


  (field-name)
  'order_by' : 'name'
  
  (field-name + ASC/DESC)
  'order_by' : 'name DESC'
  
  (array)
  'order_by' : [
  	'name DESC',
  	'id'
  ]

To contents

Display Sub-info サブ情報を表示

Each candidate can be distinguished when there is a candidate of the same name.

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

Basic 基本

Only set "true" to "sub_info" option.

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

Employee: 社員名:


  $('#ac02_01').ajaxComboBox(
	'acbox/jquery.ajaxComboBox.php',
	{
	  lang        : 'en',
	  db_table    : 'employee',
	  sub_info    : true
	}
  );

Change the field name of Sub-info 表の項目名を変更

"sub_as" option can change the field-name.

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

Employee: 社員名:


  $('#ac02_02').ajaxComboBox(
	'acbox/jquery.ajaxComboBox.php',
	{
	  lang        : 'en',
	  db_table    : 'employee',
	  sub_info    : true,
	  sub_as      : {
		id       : 'Employer ID',
		post     : 'Post',
		'position' : 'Position'
	  }
	}
  );

Setting of display field of Sub-info. サブ情報の表示カラムの設定

"show_field" option choose the displayed field-name.

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

Employee: 社員名:


  $('#ac02_03').ajaxComboBox(
	'acbox/jquery.ajaxComboBox.php',
	{
	  lang        : 'en',
	  db_table    : 'employee',
	  sub_info    : true,
	  sub_as      : {
		post     : 'Post',
		position : 'Position'
	  },
	  show_field  : 'position,post'
	}
  );

Setting of hidden field of Sub-info. サブ情報の非表示カラムの設定

"hide_field" option choose the hidden field-name.

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

Employee: 社員名:


  $('#ac02_04').ajaxComboBox(
	'acbox/jquery.ajaxComboBox.php',
	{
	  lang        : 'en',
	  db_table    : 'employee',
	  sub_info    : true,
	  sub_as      : {
		id       : 'Employer ID'
	  },

	  hide_field  : 'position,post'
	}
  );

Hide the field name of Sub-info. サブ情報の項目名を非表示にする

Set "simple" to "sub_info" option instead of "true".

"sub_info"オプションに"true"の代わりに"simple"と指定することで、
サブ情報の項目名を非表示にできます。

Employee: 社員名:


  $('#ac02_05').ajaxComboBox(
	'acbox/jquery.ajaxComboBox.php',
	{
	  lang        : 'en',
	  db_table    : 'employee',
	  sub_info    : 'simple',
	  show_field  : 'post'
	}
  );

How to use Sub-info for other purpose サブ情報を他で利用する

The "sub_info" attribute is added to text box
when you select from list.
So, you can use Sub-info for other purpose.

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

Employee: 社員名:


  var result = 'Sub-info\n';
  var json = $('#ac_02_06').attr('sub_info');
  var obj = eval( '(' + json + ')' );
  for(var key in obj){
	result += key + ' : ' + obj[key] + '\n';
   } 
  alert(result);

To contents

Select-only セレクト専用

Basic 基本

When the value that doesn't exist in the list is input, warning is received.

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

Employee: 社員名:


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

If this option is set, the value of "Primary_key" field transmit by the form.

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

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


//Text-box
<input id="ac03_01_1" name="ac03_01_1" type="text" />

//List
...
<li id="A010" class="">Adams</li>
<li id="A009" class="ac_over">Adams</li>
<li id="A005" class="">Adams</li>
...

//Hidden field
<input type="hidden" name="ac03_01_1" value="A011"/>

Setting of Primary key. 送信する値のカラムを変更

Nation: 国名:


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

To contents

Initial Value 初期値設定

NOTE: please set the value of the primary key of database.

ComboBoxに初期値を設定します。
初期値は、'primary_key'オプションのDBカラムの値を指定して下さい。

Basic 基本

Nation: 国名:


  $('#ac04_01').ajaxComboBox(
	'acbox/jquery.ajaxComboBox.php',
	{
	  lang        : 'en',
	  db_table    : 'nation',
	  init_record : 28
	}
  );

To contents

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

Search from JSON without database or server-side like PHP.

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


var data = [
	{id:'A001',name:'Adams',post:'Sales',position:'The rank and file'},
	{id:'A002',name:'Darling',post:'Sales',position:'The rank and file'},
	{id:'A003',name:'Kingston',post:'General Affairs',position:'Chief clerk'},
	{id:'A004',name:'Darling',post:'General Affairs',position:'Section chief'},
	...
];

Basic 基本

Set JSON object instead of a name of server-side file.

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

Employee: 社員名:


  $('#ac05_01').ajaxComboBox(
	data,
	{
	  sub_info    : true,
	  sub_as      : {
	    id       : 'Employer ID',
	    post     : 'Post',
	    position : 'Position'
	  },
	  select_only : true,
	  init_record : ['A009'],
	  primary_key : 'id'
	}
  );

To contents

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

Basic 基本

Nation: 国名:


  $('#ac06_01').ajaxComboBox(
	'acbox/jquery.ajaxComboBox.php',
	{
	  db_table    : 'nation',
	  bind_to     : 'foo'
	}
  )
  .bind('foo', function(){
	alert($(this).val() + ' is selected.');
  });

Not enclosed by 'form' tag フォームタグで囲んでいない場合

If text box is not enclosed by form tag and event handler is set
for inputting enter key, when one of the list is selected by enter key
function is doubly executed.
To avoid this situation, a argument that become true when selected by
enter key is set When originality event of plugin is fired.

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

Nation: 国名:


  $('#ac06_02').ajaxComboBox(
	'acbox/jquery.ajaxComboBox.php',
	{
	  db_table    : 'nation',
	  bind_to     : 'foo'
	}
  )
  .bind('foo', function(e, is_enter_key){
	if(!is_enter_key){
	  alert($(this).val() + ' is selected. (by mouse)');
	}
  })
  .keydown(function(e){
	if(e.keyCode == 13) alert($(this).val() + ' is selected. (by enter key)');
  });

To contents

Simple textbox ボタンのないシンプルなテキストボックス

Basic 基本

If it removes that the pull-down button is hidden,
there is no change at all with the usual combo-box.

プルダウンボタンのない、シンプルなテキストボックスです。
ボタンが非表示なっている以外は、通常のコンボボックスと何ら変わりはありません。

Nation: 国名:


  $('#ac07_01').ajaxComboBox(
	'acbox/jquery.ajaxComboBox.php',
	{
	  lang        : 'en',
	  'plugin_type' : 'simple', 
	  db_table    : 'nation',
	  sub_info    : true
	}
  )

To contents

TextArea(Complement a tag) テキストエリア(タグ検索・補完)

You can search and complement a tag such as "Twitter hashtag" in textarea.

テキストエリアの中にある、Twitterハッシュタグのような文字列を検索・補完することができます。

Basic 基本

Set "textarea" to "plugin_type" option. Specify "start symbol" and "end symbol" by using array.

"plugin_type"オプションに"textarea"を指定し、開始記号と終了記号を設定することで、テキストエリア内でのタグ検索が可能です。

Learning: 学問:


  $('#ac08_01').ajaxComboBox(
    'acbox/jquery.ajaxComboBox.php',
    {
      lang        : 'en',
      plugin_type : 'textarea',
      tags        : [
        {
          pattern  : ['#', ''],
          db_table : 'tag'
        }
      ]
    }
  );

Do not insert space タグ補完後に空白を挿入しない

In an initial state, a space is inserted after complement.
You can prevent by using "space" option.

デフォルトでは、タグ補完後に両側に空白が挿入されます。
(すでに空白が存在する場合や、行頭、行末の場合は除きます)
"space"オプションで、この挙動を変えることができます。

Learning: 学問:


  $('#ac08_02').ajaxComboBox(
    'acbox/jquery.ajaxComboBox.php',
    {
      lang        : 'en',
      plugin_type : 'textarea',
      tags        : [
        {
          pattern  : ['[', ']'],
          space    : [false, false],
          db_table : 'tag'
        }
      ],
    }
  );

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

Learning: 学問:


  $('#ac08_03').ajaxComboBox(
    tag_data,
    {
      lang        : 'en',
      plugin_type : 'textarea',
      tags        : [
        {
          pattern  : ['@', ''],
          db_table : 'tag'
        }
      ],
    }
  );

var  tag_data = [
  {id:1 ,name:'PhysicalEducation',japanese:'体育学'},
  {id:2 ,name:'Musicology',       japanese:'音楽学'},
  {id:3 ,name:'Mathematics',      japanese:'数学'},
  ...
  ...
];

Several patterns of tags 複数のタグパターン

Learning: 学問:


  $('#ac08_04').ajaxComboBox(
    'acbox/jquery.ajaxComboBox.php',
    {
      lang        : 'en',
      plugin_type : 'textarea',
      tags        : [
        {
          pattern  : ['[', ']'],
          space    : [false, false],
          db_table : 'tag'
        },
        {
          pattern  : ['#', ''],
          db_table : 'tag'
        },
        {
          pattern  : ['@', ''],
          db_table : 'tag'
        }
      ],
    }
  );

Set options for every tags タグごとにオプションを設定する

You can set following options for every tags.

下記のオプションは、タグごとに設定することができます。


{
  tags: [
    {
      db_table: ,
      field: ,
      search_field: ,
      select_field: ,
      order_by: ,
      primary_key: ,
      sub_info: ,
      sub_as: ,
      show_field: ,
      hide_field: 
    }
  ]
}

Learning: 学問:


  $('#ac08_05').ajaxComboBox(
    'acbox/jquery.ajaxComboBox.php',
    {
      lang        : 'en',
      plugin_type : 'textarea',
      tags        : [
        {
          pattern  : ['[', ']'],
          space    : [false, false],
          db_table : 'tag',
          sub_info : true
        },
        {
          pattern  : ['#', ''],
          db_table : 'tag',
          sub_info : true,
          sub_as   : {
            id : 'TagID',
            japanese : '日本語'
          }
        },
        {
          pattern  : ['@', ''],
          db_table : 'tag',
          order_by : 'name DESC'
        }
      ],
    }
  );

Shorten URL URLを短縮する

The result of having shortened URL using external service can be made to reflect in text area.
At present, it corresponds only to service of "bit.ly".

外部サービスを利用してURLを短縮した結果を、テキストエリア内に反映させることができます。
現在のところ、"bit.ly"にしか対応していません。

Learning: 学問:


  $('#ac08_06').ajaxComboBox(
    'acbox/jquery.ajaxComboBox.php',
    {
      lang        : 'en',
      plugin_type : 'textarea',
      shorten_url : '#ac08_06_shorten',
      shorten_src : 'acbox/bitly.php',
      shorten_min : 20
    }
  );

Complement a tag & Shorten URL タグ検索とURL短縮

By combining "Complement a tag" and "Shorten URL", the contribution to external service such as "Twitter" becomes convenient.

タグ補完とURL短縮を組み合わせることで、Twitterなどの外部サービスとの連携が便利になります。

Learning: 学問:


  $('#ac08_07').ajaxComboBox(
    'acbox/jquery.ajaxComboBox.php',
    {
      lang        : 'en',
      plugin_type : 'textarea',
      db_table    : 'tag',
      shorten_url : '#ac08_07_shorten',
      shorten_src : 'acbox/bitly.php',
      shorten_min : 20,
      tags        : [
        {
          pattern  : ['[', ']'],
          space    : [false, false]
        },
        {
          pattern  : ['#', '']

        },
        {
          pattern  : ['@', '']
        }
      ],
    }
  );

To contents