(デモ)jquery.ajaxSuggest.2.0.js

2012/02/10

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

使用例

基本

『ajaxSuggest.php』内に、接続するテーブルの情報を記述します。
JavaScript側では、PHPの配列の番号を指定するだけです。

都道府県名:


【jQuery】
$('#as01').ajaxSuggest(
	'asugg/php/ajaxSuggest.php',
	{'database':0}
);


【ajaxSuggest.php】
$db_settings = array(
	array('table'=>'prefectures', 'field'=>'name', 'order'=>'id'), //0
	array('table'=>'users_ja', 'field'=>'name', 'order'=>'id') //1
);

▲ 目次へ

予測候補の表示数を変更

予測候補の表示数は変更できます。
なお、orderの値がfieldと同じ場合は、記述を省略できます。

名前:


$('#as02').ajaxSuggest(
    'asugg/php/ajaxSuggest.php',
    {
        'database':1,
        'limit':20
    }
);

▲ 目次へ

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

複数のフィールドからまとめて検索できます。

都道府県名・人名:


$('#as03').ajaxSuggest(
    'asugg/php/ajaxSuggest.php',
    {'database':'0 1'}
);

▲ 目次へ

候補選択後に任意の処理を行う

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

名前:


$('#as04').ajaxSuggest(
    'asugg/php/ajaxSuggest.php',
    {
        'database':1,
        'bind_to':'foo'
    }
)
.bind('foo', function(){
    alert($('.as_over').text() + ' が選択されました');
});

▲ 目次へ

候補選択後に任意の処理を行う (フォームタグで囲んでいない場合)

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

名前:


$('#as05').ajaxSuggest(
    'asugg/php/ajaxSuggest.php',
    {
        'database':1,
        'bind_to':'foo'
    }
)
.bind('foo', function(e, is_enter_key){
    if(!is_enter_key){
        alert($('.as_over').text() + ' が選択されました(マウスで選択)');
    }
});
$('#as05').keydown(function (e){
    if(e.keyCode == 13){
        alert($('#as05').val() + ' が選択されました(Enterキーで選択)');
    }
});

▲ 目次へ

AND OR検索を切り替える

デフォルトはAND検索ですが、OR検索にすることもできます。

都道府県名:
AND検索 OR検索


var andor06 = null;

function as06(){
	$('#as06').ajaxSuggest(
		'asugg/php/ajaxSuggest.php',
		{'database':0, 'and_or':andor06}
	)
}
as06(); //初回設定
$('[name="radio06"]').change(function(){
	andor06 = $(this).val();
	$('#as06').empty();
	as06(); //検索タイプが変わったので、プラグインを再設定する
});

▲ 目次へ

サブ情報

リストの右側にサブ情報を表示します
'database'と同じく、PHPの配列の番号を指定します。

都道府県名:


【jQuery】
$('#as07').ajaxSuggest(
	'asugg/php/ajaxSuggest.php',
	{'database':0, 'sub_info':0}
);

▲ 目次へ

Author : sutara_lumpur / Blog / Twitter / mail address