【ダイエット支援】【食事管理】目標カロリーを保持、グラフに反映させる。

一通り食事管理機能は完成したのですが、

正直、いまいち使いづらいです。

数値を毎回入力しなければならないので。

過去に入力したデータを再利用できないかな、と思っているのですが、

調べてみると、HTMLのinputタグにはtype=searchというものがありまして、

                                <input type="search" v-model="contents.item" autocomplete="on" list="keyword"/>
                                <datalist id="keyword">
                                    <option value="札幌" />
                                    <option value="札駅" />
                                    <option value="新さっぽろ" />
                                    <option value="東札幌" />
                                    <option value="札束" />
                                </datalist>

こんな感じでautocomplete=”on” list=”キーワード”と記入すると、

• 

こんな感じでdatalistタグのid=”キーワード”の内容が入力候補として表示されます。

これをうまく使えないかと。

品名の一部を入力→入力履歴を検索→候補を表示→履歴からデータを入力

という感じで、うまく処理できないかと思っています。

データベース

本来なら栄養素情報を別テーブルにしてそれを参照するという、正規化が必要なのだと思いますが、

いまからデータベースに変更を入れるのは、既存機能の大規模改修が発生（めんどくさい）ので、

それはそのままに、履歴検索用のテーブルを用意することにします。

それがあれば、入力履歴検索用のAPIを作成すれば行けるような気がします。

UI

datalistの中のoptionタグがv-forでリストを反映させることができると思います。

ただ、大量のoptionが画面に表示されても鬱陶しいので、例えば、検索結果が10件以上だったらあえて表示させない、というのも、一つの手かもしれません。

とりあえず、こんな方針でやってみますか。

次回から着手します。