[jQuery]オートコンプリート機能を使用し、サジェスト機能を実装したいです。

前提・実現したいこと

jQueryでサジェスト機能を実装しております。
現状、以下の画像のように何も表示されていません。

こちら上手くサジェストの方が出来ていないということでしょうか？
また、上手くサジェストさせるにはどのようにソースを変更すればよろしいでしょうか？

発生している問題・エラーメッセージ

エラーメッセージ
サジェストが上手く表示されない

該当のソースコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <title>Document</title>
</head>
<body>
    <p><input type="text" id="ac1"></p>

    <script>
        let hostUrl = "http://localhost:3000/hits/";
        $(document).ready( function() {
            $("#ac1").autocomplete({
              source: function(req, resp){
                  $.ajax({
                      url: hostUrl,
                      type: "GET",
                      cache: false,
                      dataType: "json",
                      data: {
                      param1: req.term
                      },
                      success: function(o){
                      resp(o);
                      },
                      error: function(xhr, ts, err){
                      resp(['']);
                      }
                  });
              }
            });
          });
    </script>
</body>
</html>

itemNameをサジェストしたいです。

json
1{
2    "hits": [
3    {
4        "groupId": 1,
5        "parentGroupId": "",
6        "itemCode": "",
7        "itemName": "テスト1",
8        "sortOrder": 1
9    },
10    {
11        "groupId": 2,
12        "parentGroupId": "",
13        "itemCode": "",
14        "itemName": "テスト2",
15        "sortOrder": 2
16    },
17    {
18        "groupId": 3,
19        "parentGroupId": "",
20        "itemCode": "",
21        "itemName": "テスト3",
22        "sortOrder": 3
23    },
24    {
25        "groupId": 9,
26        "parentGroupId": "1",
27        "itemCode": "",
28        "itemName": "テスト1-1",
29        "sortOrder": 1
30    },
31    {
32        "groupId": 11,
33        "parentGroupId": "1",
34        "itemCode": "",
35        "itemName": "テスト1-2",
36        "sortOrder": 7
37    },
38    {
39        "groupId": 14,
40        "parentGroupId": "1",
41        "itemCode": "",
42        "itemName": "テスト1-3",
43        "sortOrder": 12
44    },
45    {
46        "groupId": 13,
47        "parentGroupId": "1",
48        "itemCode": "",
49        "itemName": "テスト1-4",
50        "sortOrder": 12
51    },
52    {
53        "groupId": 1029,
54        "parentGroupId": "9",
55        "itemCode": "10",
56        "itemName": "テスト結果10",
57        "sortOrder": 2
58    },
59    {
60        "groupId": 1026,
61        "parentGroupId": "9",
62        "itemCode": "20",
63        "itemName": "テスト結果20",
64        "sortOrder": 7
65    },
66    {
67        "groupId": 1031,
68        "parentGroupId": "9",
69        "itemCode": "30",
70        "itemName": "テスト結果30",
71        "sortOrder": 11
72    },
73    {
74        "groupId": 1076,
75        "parentGroupId": "9",
76        "itemCode": "",
77        "itemName": "テスト9-1",
78        "sortOrder": 18
79    }
80  ]
81}

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

resp 関数の引数は、サジェストで表示する文字列の配列

例) 
["テスト1", "テスト2", "テスト結果30" , "テスト9-1"]

または、 label と value を持つオブジェクトの配列

例) 
[
  { "label":"テスト1",     "value":"テスト1" },
  { "label":"テスト2",     "value":"テスト2" },
  { "label":"テスト結果30", "value":"テスト結果30" },
  { "label":"テスト9-1",   "value":"テスト9-1" },
]

にしないといけません。

http://localhost:3000/hits/ が返す json を、その形式に直せるならそれが一番手っ取り早いと思います。

json の形式を変えられないなら、

js
1success: function(o){
2  let suggestionList = o.hits.map(x => x.itemName);
3  resp(suggestionList);
4},

みたいにデータを変換してやればいいのではないでしょうか。

投稿2021/04/10 04:57

shinoharat

総合スコア1685

toyamal

2021/04/11 10:24

返信が遅くなり、申し訳ございません！データ変換で実装しようとしたところ、 Uncaught TypeError: Cannot read property 'map' of undefined のエラーが表示されます。。こちらどのように対処すればよろしいでしょうか？

shinoharat

2021/04/11 23:54

本来なら http://localhost:3000/hits/ の返す値には　{ "hits": [ ... ] } のように "hits" が含まれているはずですが、実際は　{} のように "hits" が存在しないデータが返されているものと推測されます。この場合 o.hits の結果が undefined になるため、その次の map 処理が出来ずにエラーになります。

shinoharat

2021/04/12 00:15

http://localhost:3000/hits/ の仕様が分からないので、"hits" が含まれないのがバグなのか仕様なのか私では判別できません。バグならサーバ側を修正してください。仕様なら、"hits" が含まれないパターンを考慮して、 let suggestionList = o.hits?.map(x => x.itemName) ?? []; resp(suggestionList); と書いてください。今回は「Null 合体」と「オプショナルチェイニング演算子」を使用しています。もしご存知ない場合は、下記のURLを読んで、コードの意味を理解してから使用してください。 ■■■参考URL■■■ Null 合体 - JavaScript | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator オプショナルチェイニング演算子 - JavaScript | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining

shinoharat

2021/04/12 00:19

ちなみに、質問文に掲載されているコードにIEで動かない構文が使われていたので、IEはサポート対象外と認識していますが、誤りないでしょうか？（私の提示したコードも同様に、IEをサポートしていません）

toyamal

2021/04/12 00:19

ありがとうございます！サーバー側の問題でした！助かりました！！

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