jquery.ajax-combobox

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

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

Nation: 国名:

HTML

<input id="ac01_01" type="text">

JavaScript

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

"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: 人名:

JavaScript

$('#ac01_02').ajaxComboBox(
  'lib/jquery.ajax-combobox.php',
  {
    lang: 'en',
    db_table: 'name',
    per_page: 20,
    navi_num: 10,
  }
);

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

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

Name: 人名:

JavaScript

$('#ac01_03').ajaxComboBox(
  'lib/jquery.ajax-combobox.php',
  {
    lang: 'en',
    db_table: 'name',
    navi_num: 1,
    navi_simple: true
  }
);

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

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

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

JavaScript

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

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

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

Nation: 国名:

JavaScript

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

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

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

Nation: 国名:

JavaScript

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

(field-name)
order_by: 'name'

(field-name + ASC/DESC)
order_by: 'name DESC'

(Array)
order_by: [
 'name DESC',
 'id'
]

Set the lang option.

langオプションで指定してください。

Option value	Language
de	German (Thanks Sebastian Gohres)
en	English
es	Spanish (Thanks Joaquin G. de la Zerda)
pt-br	Brazilian Portuguese (Thanks Marcio de Souza)
ja (default)	Japanese

Nation (de): 国名 (de):

---

Nation (es): 国名 (es):

---

Nation (pt-br): 国名 (pt-br):

---

Nation (ja): 国名 (ja):

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

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

Employee: 社員名:

JavaScript

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

"sub_as" option can change the field-name.

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

Employee: 社員名:

JavaScript

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

						 

"show_field" option choose the displayed field-name.

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

Employee: 社員名:

JavaScript

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

						 

"hide_field" option choose the hidden field-name.

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

Employee: 社員名:

JavaScript

$('#ac02_04').ajaxComboBox(
  'lib/jquery.ajax-combobox.php',
  {
    lang: 'en',
    db_table: 'employee',
    sub_info: true,
    sub_as: {
      id: 'Employer ID'
    },
    hide_field: 'position,post'
  }
);

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

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

Employee: 社員名:

JavaScript

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

						 

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: 社員名:

JavaScript

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);

When the value that does not exist in the list is input, warning is received.

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

Employee: 社員名:

JavaScript

$('#ac03_01').ajaxComboBox(
  'lib/jquery.ajax-combobox.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属性に設定しています。

// Textbox
<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"/>

Nation: 国名:

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

Nation: 国名:

JavaScript

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

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: 国名:

JavaScript

$('#ac06_02').ajaxComboBox(
  'lib/jquery.ajax-combobox.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)');
});

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

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

Nation: 国名:

JavaScript

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

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

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

JavaScript

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'},
  ...
];

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

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

Employee: 社員名:

JavaScript

$('#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'
  }
);

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

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

Nation: 国名:

JavaScript

$('#ac07_01').ajaxComboBox(
  'lib/jquery.ajax-combobox.php',
  {
    lang: 'en',
    plugin_type: 'simple', 
    db_table: 'nation',
    sub_info: true
  }
);

You can get a instance of the plugin's object, and control after calling the plugin.

プラグインのインスタンスを受け取ることで、プラグイン呼び出し後に設定を変更することができます。

Nation: 国名:

JavaScript

var arr_instance = $('#ac07_02').ajaxComboBox(
  '-----',
  {
    lang: 'en',
    db_table: '-----',
    instance: true
  }
);
$(arr_instance).each(function() {
  this.option.source = 'lib/jquery.ajax-combobox.php';
  this.option.db_table = 'nation';
});

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

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

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

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

Learning: 学問: #philosophy #gy #lo #lin

JavaScript

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

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

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

Learning: 学問: [mathematics][his] [phi][gy] [lo][lin]

JavaScript

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

Learning: 学問: @mathematics @his @phi @gy @lo @lin

JavaScript

('#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:'数学'},
  ...
  ...
];

Learning: 学問: [mathematics][his] #phi #gy @lo @lin

JavaScript

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

You can set following options for every tags.

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

JavaScript

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

Learning: 学問: [mathematics][his] #phi #gy @lo @lin

JavaScript

$('#ac08_05').ajaxComboBox(
  'lib/jquery.ajax-combobox.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'
      }
    ],
  }
);

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: 学問: http://ja.wikipedia.org/wiki/あにゃまる探偵キルミンずぅ *good*. (http://www.google.com/) *good*. ftp://too.short *bad*.("shorten_min" option) Do not touch URLhttp://www.google.com/ *bad*. www.google.com *bad*. (URI scheme is required) Shorten

JavaScript

$('#ac08_06').ajaxComboBox(
  'lib/jquery.ajax-combobox.php',
  {
    lang: 'en',
    plugin_type: 'textarea',
    shorten_btn: '#ac08_06_shorten',
    shorten_src: 'lib/bitly.php',
    shorten_min: 20
  }
);

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

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

Learning: 学問: [math][his] #phi #gy http://ja.wikipedia.org/wiki/あにゃまる探偵キルミンずぅ *good*. (http://www.google.com/) *good*. ftp://too.short *bad*.("shorten_min" option) Do not touch URLhttp://www.google.com/ *bad*. www.google.com *bad*. (URI scheme is required) @lo @lin Shorten

JavaScript

$('#ac08_07').ajaxComboBox(
  'lib/jquery.ajax-combobox.php',
  {
    lang: 'en',
    plugin_type: 'textarea',
    db_table: 'tag',
    shorten_btn: '#ac08_07_shorten',
    shorten_src: 'lib/bitly.php',
    shorten_min: 20,
    tags: [
      {
        pattern: ['[', ']'],
        space: [false, false]
      },
      {
        pattern: ['#', '']
      },
      {
        pattern: ['@', '']
      }
    ],
  }
);