なかなかいい感じに仕上がっております。

    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)
        {
            $obj = new \stdClass();
            foreach($this->templateParamNames as $paramName)
            {
                $obj->$paramName = $record->$paramName;
            }
            $result[] = $obj;
        }
        foreach($records2 as $record)
        {
            $obj = new \stdClass();
            foreach($this->templateParamNames as $paramName)
            {
                $obj->$paramName = $record->$paramName;
            }
            $result[] = $obj;
        }
        return $result;
    }

        onChangeItem: function() {
            if(this.contents.item!=""){
                var flg = this.setTemplete();
                if(flg == false) {
                    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;
                    });
                }
            }else{
                this.keywords = [];
            }
        },
        setTemplete: function() {
            for (var index = 0; index < this.keywords.length; index++) {
                if(this.keywords[index].item == this.contents.item) {
                    this.contents.protein = this.keywords[index].protein;
                    this.contents.liqid = this.keywords[index].liqid;
                    this.contents.carbo = this.keywords[index].carbo;
                    this.contents.calorie = this.keywords[index].calorie;
                    return true;
                }
            }
            return false;
        }

これで入力履歴からデータの入力ができました。

ついでに同じデータが二重で履歴に登録されないように細工します。

    /**
     * ヒストリにデータを１件追加する
     */
    public function addHistory($param, $user)
    {
        $record = $this->searchKeyword($param["item"], $user);
        if(count($record) != 0)
        {
            return;
        }
        $model = new EatingHistoryItem();
        foreach($this->templateParamNames as $name)
        {
            $model->$name = $param[$name];
        }
        $model->save();

        $this->attachToUser($model, $user);
    }

これである程度利便性が高まりましたね。

あとは管理画面か・・・。

他のユーザーから管理画面を表示できないようにしないと。

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

    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;
                });
            }
        }

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

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

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

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