jquery.ajax-combobox

create a text box it can auto-complete and pull-down-select.

オートコンプリートとドロップダウンリストを組み合わせたコンボボックス

Version
7.4.3
Update
2015-01-01
Author
Yuusaku Miyazaki
License
MIT License
GitHub » JSDoc »

Usage 使い方

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

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

HTML
<input id="ac01_01" type="text">
JavaScript
$('#ac01_01').ajaxComboBox(
  'lib/jquery.ajaxComboBox.php',
  {
    lang: 'en',
    db_table: 'nation'
  }
);

Changing the amount of displays of the list 候補リスト・隣接ページの表示数を変更

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

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

JavaScript
$('#ac01_02').ajaxComboBox(
  'lib/jquery.ajax-combobox.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 + 右・左)

JavaScript
$('#ac01_03').ajaxComboBox(
  'lib/jquery.ajax-combobox.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』と入力してみてください。

JavaScript
$('#ac01_04').ajaxComboBox(
  'lib/jquery.ajax-combobox.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』と入力してみてください。

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

Setting 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"オプションで任意に指定することもできます。

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'
]

Changing the language of the message メッセージの言語を変える

Set the lang option.

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

Option valueLanguage
deGerman
(Thanks Sebastian Gohres)
enEnglish
esSpanish
(Thanks Joaquin G. de la Zerda)
pt-brBrazilian Portuguese
(Thanks Marcio de Souza)
ja (default)Japanese



Basic of Sub-info サブ情報の基本

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

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

JavaScript
$('#ac02_01').ajaxComboBox(
  'lib/jquery.ajax-combobox.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"オプションで、表示名を変更できます。

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

						 

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

"show_field" option choose the displayed field-name.

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

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

						 

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

"hide_field" option choose the hidden field-name.

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

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

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

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

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

JavaScript
$('#ac02_05').ajaxComboBox(
  'lib/jquery.ajax-combobox.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形式でサブ情報が格納されるので、他で利用することが可能です。

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

Basic of Select-only セレクト専用の基本

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

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

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

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

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

Basic of after selected イベント発火の方法

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

Not enclosed by "form" tag formタグで囲んでいない場合

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となる引数を追加しました。

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

Initial value 初期値設定

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

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

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

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

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形式のオブジェクト配列を指定します。

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

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

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

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


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

Getting plugin object プラグインのオブジェクトを受け取る

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

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


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

Basic of textarea テキストエリアの基本

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"を指定し、開始記号と終了記号を設定することで、テキストエリア内でのタグ検索が可能です。

JavaScript
$('#ac08_01').ajaxComboBox(
  'lib/jquery.ajax-combobox.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"オプションで、この挙動を変えることができます。

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

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

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

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

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

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

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

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"にしか対応していません。

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

Using both 両方を使う

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

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

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: ['@', '']
      }
    ],
  }
);
Top