jQueryの教科書：autocomplete()
- コード
HTML
<input type="text" name="restaurant_name" >
<input type="hidden" name="restaurant_id">
検索BOXを表示する。
$('input[name="restaurant_name"]').autocomplete({
source: function( req, res ) {
$.ajax({
url: "/api/restaurants/?=" + encodeURIComponent(req.term),
type: "GET",
dataType: "json",
success: function( data ) {
res(data);
}
});
},
autoFocus: true,
delay: 500,
minLength: 1,
select: function (e,ui) {
$('input[name="restaurant_id"]').val(ui.item.id);
}
});
use App\Restaurant;
if ($request->get('q')) {
$restaurants = Restaurant::where('name', 'like', '%' . $request->get('q') . '%')
->orderBy('name', 'asc')
->take(20)
->get();
}
$data= ;
foreach ($restaurants as $restaurant) {
$data = [
'id' => $restaurant->id,
'label' => $restaurant->name,
'value' => $restaurant->name,
];
}
return response()->json($data);
- jQueryの解説
〇autocomplete()メソッドは入力補完ができるメソッド。
引数内にjson形式でオプションを入力していく。
source ： 補完するデータのソース。（入力必須）①データの配列、②データを返すURLの文字列、
③データを返す関数のいずれかを指定する。
①配列
下記のいずれかの形式とする。
(1) ユーザに表示する値とinput要素に挿入する値が同じ場合
[ "Choice1", "Choice2" ]
(2) ユーザに表示する値とinput要素に挿入する値が異なる場合
[ { label: "Choice1", value: "value1" }, ... ]
label：ユーザに表示する値。 value：input要素に入れる値。
②URL文字列
①配列と同様のJSONデータを返すURL。
この場合、ユーザが入力した文字列が下記URLの後にパラメータとして加えられ、
HTTPリクエストが送られる。
③関数 Function(Object request, Function response(Object data))
下記の2つの引数を受け取る関数を使用する。ajaxでリモートから取得も可能。
(1) request
termというプロパティのみ持つオブジェクト。
このrequest.termには、ユーザが入力した文字列が代入されている。
(2) response
ユーザに提供する候補データを引数に持つコールバック関数。
autoFocus： trueを設定すると、メニューが開いた際に最初の項目を選択する。
（初期値：false）
delay ： ユーザが入力開始からリストメニューの検索開始までの遅延時間をミリ秒単位で指定。
リモートデータを使う場合はサーバ負荷を考慮する必要がある。
minLength：リストメニューの検索が実行されるのに必要なユーザーが入力する最低限の文字列数。
select ：メニューから項目を選択した時に行われる処理を指定。引数はselect( event, ui )。
デフォルトでは選択した項目を入力項目と置き換える。
ui.itemでその項目を取得できる。（未選択ならnull）
eventはイベント型。
select以外にもいろんなイベントを指定可能。
〇ajax()は非同期通信ができるメソッド。
別途紹介。
encodeURIComponent(str)：引数の文字列をURLとして使える文字列に変換する関数。
- PHP（Laravel）の解説
最初の処理は飛ばすが、最終的にjsonを返す必要がある。
label ： 候補リストに表示するテキスト
value ： テキストボックスに実際に反映する値
その他 ： 渡したいデータを何でも渡せる。javascript側では「ui.item.その他」で取得可能
