Laravel+jQuery UIでオートコンプリート

Posted in Laravel, PHP on 9月 18, 2016

Laravel+jQuery UIで簡単にオートコンプリートを実現

前回、オートコンプリートを使用して入力の手間を省きたいということで、jQuery UIのオートコンプリートの機能を簡単に説明しました。

※オートコンプリート・・・文字列の最初の文字を入力するだけで自動的に合致する候補ワードを表示してくれる機能のことです。

今回は、候補ワードをファイルに保存するのではなく、テキストフィールドにユーザが入力した文字を使ってデータベース検索を行い、その結果を候補ワードとして表示させる手順を説明します。

データベースを使用してオートコンプリートを実現するためには、非常に敷居が高いイメージを持つかもしれませんが、jQuery UIとLaravelフレームワークを 使用すれば、簡単に実現することができます。

データベースへのアクセスは、ajaxを利用して非同期で行うためスムーズに候補ワードを表示することが可能です。

テーブルの準備

テキストフィールドにブランド名の一部を入力すると入力した文字が含まれるブランドを表示させることを目的としているため、下記のようなテーブルを準備しました。

mysql> select * from brands;
+----+----------+--------------------+---------------------+---------------------+
| id | brand    | brand_name         | created_at          | updated_at          |
+----+----------+--------------------+---------------------+---------------------+
|  1 | Nike     | ナイキ             | 0000-00-00 00:00:00 | 0000-00-00 00:00:00 |
|  2 | Asics    | アシックス         | 0000-00-00 00:00:00 | 0000-00-00 00:00:00 |
|  3 | Adidas   | アディダス         | 0000-00-00 00:00:00 | 0000-00-00 00:00:00 |
|  4 | Yonex    | ヨネックス         | 0000-00-00 00:00:00 | 0000-00-00 00:00:00 |
|  5 | Reebox   | リーボックス       | 0000-00-00 00:00:00 | 0000-00-00 00:00:00 |
|  6 | Puma     | プーマ             | 0000-00-00 00:00:00 | 0000-00-00 00:00:00 |
|  7 | Mizuno   | ミズノ             | 0000-00-00 00:00:00 | 0000-00-00 00:00:00 |
|  8 | Champion | チャンピオン       | 0000-00-00 00:00:00 | 0000-00-00 00:00:00 |
+----+----------+--------------------+---------------------+---------------------+

オートコンプリートを実現するための準備

Laravelでオートコンプリートを実現するためには、最低4つのファイル(routes.php, IndexContller.php, index.php, AutoCompleteController.php)が必要となります。

routes.php

Route::resource('index','IndexController');

Route::get('auto_complete/search','AutoCompleteController@search');

IndexControler.php

<?php

namespace App\Http\Controllers;

class IndexController extends Controller
{

    public function index(){

            return view('autocomplete.index');

     }
}

index.blade.php

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Laravelを利用したオートコンプリート</title>
  <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" >
  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
</head>
<body>

<div class="row">

<div class="col-xs-4">

{!! Form::label('brand', 'ブランド', array('class'=>'control-label ')) !!}

{!! Form::text('brand',Input::old('brand'),array('class'=>'form-control','id'=>'brand','placeholder' => 'ブランド名を入力')) !!}

</div><!-- col-xs-4 -->
</div><!-- row -->
</body>
  <script>
  $( function() {
    $( "#brand" ).autocomplete({
          source: 'auto_complete/search',
          minLength: 1,
          select: function(event, ui) {
                $('#brand').val(ui.item.value);
          }
    });
  } );
  </script>
</html>

テキストフィールドを入力するページはブランドを入力するテキストフィールドのみのシンプルな画面です。

テキストフィールド

AutoCompleteController.php

namespace App\Http\Controllers;

use App\Brand;

use Input;
use Response;

class AutoCompleteController extends Controller
{

         public function search(){

                 $term = Input::get('term');

                 $results = array();

                 $brands = Brand::where('brand','like','%'.$term.'%')->take(10)->get();

                 foreach ( $brands as $brand){

                        $results[] = ['label' => $brand->brand, 'value' => $brand->brand];

                                         }

         return Response::json($results);

         }

}

コントローラーは、ユーザの入力した文字を受け取り、データベースにアクセスし、その結果をJsonで戻します。

jQueryのautocompleteから送られてくる文字は、'term'に入っているので、Input::get('term')から文字を取得しています。

labelには、テキストフィールドに文字を入れた後に画面上に出力させたい候補ワードを指定します。また、valueは、テキストフィールドのinputタグのvalueに入れたい値を指定します。

例えば、

labelには、Brandテーブルのbrand_name列、valueには、Brandテーブルのbrand列を指定した場合

テキストフィールでNikeと入力すれば候補ワードとしてナイキが出力されますがナイキを選択すると画面には、valueであるNikeが表示されます。(inputタグのvalueには、Nikeが入ります)

labelには、Brandテーブルのbrand列、valueには、Brandテーブルのbrand列を指定した場合

テキストフィールでNikeと入力すれば候補ワードとしてNikeが出力され、Nikeを選択すると画面には、valueであるNikeが表示されます。(inputタグのvalueには、Nikeが入ります)

テキストフィールドへの入力

すべてのファイルを作成し、テキストフィールドに"i"を入力するとその文字を含む候補ワードが出力されることが確認できます。 autocompleteの結果