【ダイエット支援】【入力履歴機能】履歴データ処理の作成

うまくスクショが取れなかった・・・

    public function searchKeyword($keyword, $user)
    {
        $result = [];
        $records1 = EatingTemplateItem::where('item', 'like', "%$keyword%")->get();
        $records2 = $user->EatingHistoryItems()->where('item', 'like', "%$keyword%")->get();
        if(count($records1) + count($records2) >= 10 )
        {
            return [];
        }
        foreach($records1 as $record)
        {
            $result[] = $record->item;
        }
        foreach($records2 as $record)
        {
            $result[] = $record->item;
        }
        return $result;
    }

    public function search(Request $request)
    {
        return response()->json([
            'keywords' => $this->eatingManagement->searchKeyword($request->contents['item'], Auth::user()), 
            ]);
    }

Route::post('api/eating/search', 'Eating\ApiController@search');

                            <td><input type="search" v-model="contents.item" autocomplete="on" list="keyword" v-on:keydown="onChangeItem"/></td>
                            <datalist id="keyword">
                                <option v-for="keyword in keywords" v-bind:value="keyword" />
                            </datalist>

        onChangeItem: function() {
            if(this.contents.item!=""){
                var self = this;
                this.param.contents = this.contents;
                axios.post('/api/eating/search', this.param).then(function(response){
                    self.keywords = [];
                    response.data.keywords.forEach(keyword => {
                        self.keywords.push(keyword);
                    });
                }).catch(function(error){
                    self.error_flg = true;
                    self.errors = error.response.data.errors;
                });
            }
        }

まだコードは暫定ですが、

とりあえず、入力した文字からデータベースを検索して、入力候補表示までできました。

とりあえず、検索結果だけ。

検索結果から各パラメータを自動入力させるのはまた次回に。