GattsCOM

ブログ

BLOG

  1. Home
  2. Blog

jQuery UIのAutocompleteを使ってみる

ネットで調べると色んなやり方が出てきて、どれを参考にしたらええねん！と手当たり次第試してみました。
いろいろ試してみて自分の中で一番しっくり来たやり方をブログしまっす。

Jquery UI 公式 ←jQuery UIのダウンロードはコチラから！

「class名="test"の入力フォームに対して、データベースから候補を引っ張ってきて表示」をやってみます。
候補リストの内容は「auto_complete」テーブルのkeywordカラムに準備しておきます。

まずはscript側から。
ajaxでphp側に入力情報を飛ばします。

$('.test').autocomplete({
		source: function(req, resp){
			$.ajax({
				url:'auto_complete',
				type:'POST',
				cache:false,
				dataType:'json',
				data:{
					str:req.term
				},
				success:function(o){
					resp(o.data);
				},
				error:function(xhr, ts, err){
					resp(['']);
				}
			});
		},
		//ここにAutocompleteのオプションを設定
    });

次にphp側の処理。
入力キーワードに対してLIKE検索で引っ掛けます。

$post = Input::only('str');

//コールバックで返す用の変数(配列)
$d_arr = array();
		
$data = DB::table('auto_complete')
	->where('keyword', 'LIKE', '%'.$post['str'].'%')
	->get();
		
if($data){
	foreach($data as $d){
		array_push($d_arr, $d->keyword);
	}
}
		
return Response::json(array('data'=>$d_arr));

こんな感じ。
コールバックに中身がある場合、入力フォーム部分に候補リストが表示されます。

ではまた～(；´∀｀)ノ

関連記事はこちら