jquery autocompleteをセレクト形式で表示・取得したい

jqueryのautocompleteを用いて、DBのリストをセレクト形式で表示したいです。

現状、テキスト形式で、店名＋支店名の候補を表示することまではできておりますが、
セレクト形式を利用してshop_idを取得できておりません。（php view参照）

successした場合の、javascriptからviewへの受け渡しと、view側の表示方法に課題があるのですが、
ご教示をいただけないでしょうか。

最終的には、選択したshop_idを含めた商品テーブルをDBへ保存となります。
（こちらは、shop_idが取得できれば実装可能。）

どうぞよろしくお願いいたします。

php
1{{--テキスト形式で店名の取得はできる--}}
2{!! Form::text('search_text', null, array('placeholder' => 'Search Shops','class' => 'form-control','id'=>'search_text')) !!}
3
4{{--shop_idと紐付けたいため、セレクト形式で表示したいが記載方法がわからない--}}
5{!! Form::select('search_text',[''=>'Choose Shops'] + $shops,null,['class'=>'form-control']) !!}
6

javascript
1	<script>
2		$(document).ready(function() {
3			console.log(' start');
4			src = "{{ route('searchajax') }}";
5			console.log(src);
6
7			$("#search_text").autocomplete({
8				source: function(request, response) {
9					$.ajax({
10						url: src,
11						dataType: "json",
12						data: {
13							term : request.term
14						},
15						success: function(data) {
16							response(data);
17
18						}
19					});
20				},
21				min_length: 3,
22
23			});
24		});
25	</script>
26

contorller側で、idと店名＋支店名をjavascriptに返すことまではできています。

php
1class AutoCompleteController extends Controller {
2
3    public function index(){
4        ChromePhp::log('start autocomlete index');
5        return view('autocomplete.index');
6    }
7    public function autoComplete(Request $request) {
8        ChromePhp::log('start autocomlete');
9
10        $query = $request->get('term','');
11
12        ChromePhp::log(' $query :',$query);
13
14//        $products=Inventory::where('name','LIKE','%'.$query.'%')->get();
15        $products = DB::table('shops')
16            ->where('shop_branch_name', 'LIKE', '%'.$query.'%')
17            ->orWhere('shop_name', 'LIKE', '%'.$query.'%')
18            ->leftJoin('shop_lists', 'shops.shop_list_id', '=', 'shop_lists.id')
19            ->get();
20//            ->take(10)->get();
21
22        $data=array();
23        foreach ($products as $product) {
24            $data[]=array('value'=>$product->shop_name.' '.$product->shop_branch_name,'id'=>$product->id);
25        }
26        if(count($data))
27// shopsテーブルのid と、店名＋支店名の入った配列を返す
28            return $data;
29        else
30            return ['value'=>'No Result Found','id'=>''];
31    }
32
33}

DB
1DB
2
3shops : shop_id , shop_branch_name , shop_list_id 
4shopsテーブルで、支店名と店コードを持つ
5
6shop_lists : id , shop_name
7shop_listsテーブルで、店コードと店名を持つ

行動規範の内容に同意します

回答1件

ベストアンサー

「jqueryのautocomplete」が jQuery UI の Autocomplete Widget であれば、select要素には使えません。

【Autocomplete Widget | jQuery UI API Documentation】
http://api.jqueryui.com/autocomplete/#option-source

Any field that can receive input can be converted into an Autocomplete, namely, <input> elements, <textarea> elements, and elements with the contenteditable attribute.

Laravel には詳しくないですが、連想配列を渡せばよさそうです。

【Laravel Recipes :: Creating a Select Box Field】
http://laravel-recipes.com/recipes/163/creating-a-select-box-field

投稿2016/09/06 18:08