Java, Vue,　サジェスト機能の実装について

前提・実現したいこと

Javascript/Vue.jsでアプリの修正をしています。
フォームから責任者を選ぶ箇所があり、現状はDBから
apiを介してselectタグでひっぱってきて表示させているのですが

サジェスト機能を追加したいです。

vueとサジェストで調べていると、datalistタグとoptionタグを用いれば実装できるようなのですが

optionタグの中身はDBから取得したいです。
プログラミングをはじめて数ヶ月の為、APIとの連携もままなりません。

selectタグで選択肢から選ぶのではなく、inputタグから入力しつつサジェスト機能を実装させる場合、
どのようにコードを書いてよいか分かりません。

私の知識では、下記のような形で実装をしたいのですが、ヒントなどいただけると幸いです。

サジェスト機能は<datalist>タグと<option>タグで実装。

<option>の中身をDBから引っ張ってきたい。

空の配列result:[]を定義して、
APIから引っ張ってきた責任者の名前が記載されているDB内のデータをresultに追加させて

<option>内では result in resultsのような形で表示させる。

上記の、APIから引っ張ってきてresultに追加させる部分について、どのようにコードを書いたらわからないです。
よろしくおねがいします。

m.ts10806

2021/01/22 22:14

「コードが分からない」と言われましても、実際のテーブルの定義、現在の実装、今何ができているのか　などなど他人には分からないことだらけです。どのレベルでの回答をおのぞみでしょうか。「コードくれ」ならもはやそれは質問ではなく作業依頼です。 1個1個細分化していけば、その１つ１つは調べて何のヒントすら得られないことはないはずです。 https://teratail.com/questions/122705 「どう書いたらいいのか分からない」のは大抵、細分化が不十分過ぎることに起因します。

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

回答2件

ベストアンサー

ページ読み込み時に、セレクトボックスのデータを取得するサンプルを書いてみました。
なお、責任者名のデータは、データベースから、apiを用いて配列として取得する前提です。

サジェスト可能なセレクトボックス（フォーム）部分はコンポーネント化し、template内で<datalist>タグを使用しています。

データ自体はcreatedのタイミングで読み込んでいます。
参考：Vueのライフサイクルタイム

※下記は開発用のCDNを使ってたりするんで本番に使う場合はいろいろ注意してください。

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8" />
6    <title>sample</title>
7</head>
8
9<body>
10    <div id="app">
11        <label for="name">責任者</label>
12        <input type="text" list="name">
13        <!--component.jsで登録した「imput-list」という名前を指定-->
14        <!--Vueオブジェクトのnamesプロパティの内容を、templateのoptionsに渡す。-->
15        <input-list id="name" :options="names"></input-list>
16    </div>  
17    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
18    <script src="component.js"></script>
19</body>
20
21</html>

　
component.js

javascript
1// input-listという名前のコンポーネントを登録する。
2Vue.component("input-list", {
3  props: ["options"],
4  template: `<datalist>
5              <option v-for="option in options" :value="option"></option>
6            </datalist>`,
7});
8
9const url = "データベースのAPIエンドポイント";
10
11new Vue({
12  el: "#app",
13  data() {
14    return {
15      names: [""], // 初期値。ここでは空欄1個とした。
16    };
17  },
18  created() {
19    //セレクトボックス（フォーム）用のデータを取得する。
20    fetch(url)
21      .then((res) => res.json())
22      .then((data) => {
23        //namesプロパティに、データベースから取得したデータ（配列）を設定
24        this.names = data;
25      });
26  },
27});
28