【jQueryプラグイン】 jquery.ajaxSuggest.js を公開しました。

jquery.ajaxComboBox


※ 更新終了
ajaxComboBoxへ合流しました。

Updating is closed.
This plugin was unified with "jquery.ajaxComboBox".


jquery.ajaxComboBox
simple mode: http://www.usamimi.info/~sutara/ajaxComboBox/#sample07

  • Latest version : 1.5.4 (2012/02/10)
  • jQuery 1.7以降で動作します

目次 (Contents)


デモ、ダウンロード (Demo, Download)

【デモ (Demo)】

【ダウンロード (Download)】

↑ 記事トップへ

特徴

なんの変哲もない、オートコンプリートテキストボックスです。
ただ、日本語の検索にも完全に対応しています。
なお、AjaxでDBに問い合せて予測候補を検索する方式に特化しています。


▲シンプルな候補リスト表示



▲岩手県のサブ情報(ver 1.5〜)

【元になったプラグイン (Based-on)】
このプラグインは、Peter Vulgarisさんが作成した『jquery.suggest 1.1』を
改造したものです。

【動作確認】

【ライセンス(License)】
MIT License

↑ 記事トップへ

設置方法

※CakePHPで利用するには、下記を参考にしてください。
http://d.hatena.ne.jp/sutara_lumpur/20100721/1279676671

=>HTML
※テキストボックスに対して指定してください。



Javascript:

jQuery(document.body).ready(function($){
  //もっとも単純な形式で設置

  $('#input_suggest').ajaxSuggest('hoge.php');
});
HTML:

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

以下のように出力されます。



// (1) テキストボックス

<input id="input_suggest" autocomplete="off" class="as_input">
// (2) 候補リスト

<ul class="as_results">

	<li>Jamaica</li>

	<li class="as_over">Japan</li>

	<li>Jordan</li>

	<li>Azerbaijan</li>

	<li>Tajikistan</li>

	<li>Fiji</li>

</ul>

↑ 記事トップへ

オプション

第2引数に、JSON形式でオプションを指定できます。


$('#input_suggest').ajaxSuggest(

  'hoge.php',

    {

      'database':2,

      'per_page':20

    }

);


送信先(ajaxSuggest.php)

$db_settings = array(

    array('table'=>'prefectures', 'field'=>'name', 'order'=>'id'), //0

    array('table'=>'users_ja', 'field'=>'name', 'order'=>'id'), //1

    array('table'=>'nations', 'field'=>'name', 'order'=>'id'), //2

    array('table'=>'users_en', 'field'=>'name', 'order'=>'id') //3

);
オプション名 説明 初期値
database
接続するDBテーブルを指定。

あらかじめ用意していたテーブル情報を収めた配列の番号を指定。

なお、"field"と"order"フィールドが同じ場合、"order"の記述を省略できる。
0
複数指定の場合
'0 1 2'
limit 候補リストとして表示する最大件数 10
and_or 空白で区切られた単語を、AND検索するか、OR検索するか
【使い方】		 AND
order_by ORDER BY(SQL) で、並ベ替えるのは昇順か降順か 'ASC'
bind_to 候補選択後に発火するイベント名 'ajaxSuggest_selected'
results_class 候補リストのCSSクラス名 'as_results' / 'as_results_mini'
select_class 選択中の<li>タグのCSSクラス名 'as_overs' / 'as_over_mini'

↑ 記事トップへ

更新履歴

↑ 記事トップへ