78411


**環境**

ruby 2.7.2  
rails 6.1  
macOS

**前提**

ポートフォリオ作成のため、現在自作アプリを実装しております。  
その中で、インクリメンタルサーチを機能の一つとして実装しております（下記参照）  
参考記事：https://qiita.com/junyais30st/items/f1ad5bd3b025434983b7

[![画像の説明をここに入力](https://i.stack.imgur.com/pVeK3.gif)](https://i.stack.imgur.com/pVeK3.gif)

**解決したいこと**

インクリメンタルサーチで表示させたカラム値をクリックすることで、フォーム（訪れた場所）に値を反映させたいです。

**試したこと**

インクリメンタルサーチに関する参考記事を探したのですが、リンクやリストでの表示が殆どで自力で解決することができませんでした。

詳しい方がいましたら是非アドバイスいただけると幸いです。  
何卒よろしくお願いします。

**該当するソースコード**

`app/views/travel_records/new.html.slim`

[code]

    .form-group.mt-4
          = f.input :place, :placeholder => "スポット名・住所を入力してください", required: false, :input_html => { id: "spot_search" }
        .spot_search_result
    
[/code]

`app/javascript/spot_search.js`

[code]

    $(function () {
      function addSpot(spot) {
        let html = `
          <ul class="list-group">
            <li class="list-group-item">${spot.name || spot.location}</li>
          </ul>
        `;
        $(".spot_search_result").append(html);
      };
    
      function addNoSpot() {
        let html = `該当のスポットがありません`
        $(".spot_search_result").append(html);
      };
      $("#spot_search").on("keyup", function () {
        let input = $("#spot_search").val();
        $.ajax({
            type: 'GET',
            url: '/travel_records/search',
            data: {
              keyword: input
            },
            dataType: 'json'
          })
          .done(function (spots) {
            $(".spot_search_result").empty();
            if (spots.length !== 0) {
              spots.forEach(function (spot) {
                addSpot(spot);
              });
            } else if (input.length == 0) {
              return false;
            } else {
              addNoSpot();
            }
          })
      });
    });                                                                                                                                                                 
    
[/code]


CC BY-SA 4.0
2021-07-25T07:14:20.440
78393
2021-07-26T07:44:12.557
2021-07-25T12:21:11.407
46968
46968
question
javascript ruby-on-rails ruby ajax slim-lang
インクリメンタルサーチで表示させたカラム値をクリック後、入力フォームに表示されたい


jQueryの質問になるかと思いますが書いてみました

$.ajaxをfetchに変更していますが、内容とは関係ないので気にしないでください  
<https://codesandbox.io/s/ja-stackoverflow-78393-rn484>

やることは以下のステップになると思います

  1. 補完リストのクリックイベントを受け取る
  2. クリックしたアイテムの情報をinputに代入する
  3. 補完リストを削除する

1.のコード

[code]

    $(".spot_search_result").on("click", ".list-group-item", function (event) {
    // 省略
    })
    
[/code]

jQueryの `on` メソッドを使ってlist-group-itemのクリックイベントを受け取っています  
<https://api.jquery.com/on/>

2.のコード  
クリックしたアイテム情報の渡し方というのはやり方いくつかありますが、今回は補完データのHTMLに渡すデータを入れるようにしています

[code]

        let html = `
          <ul class="list-group">
            <li class="list-group-item"
             data-spot-name="${spot.name}"
             data-spot-location="${spot.location}"
            >
              ${spot.name || spot.location}
            </li>
          </ul>
        `;
    
[/code]

`data-`から始まるものはデータ属性といってJSから扱いやすいようにブラウザが処理してくれます  
<https://developer.mozilla.org/ja/docs/Learn/HTML/Howto/Use_data_attributes>

選択肢のHTMLに情報を入れておきクリックイベント時に取り出します。取り出したデータはそのままinputに挿入しています

[code]

      $(".spot_search_result").on("click", ".list-group-item", function (event) {
        const val = event.target.dataset.spotName || event.target.dataset.spotLocation;
        $("#spot_search").val(val);
      });
    
[/code]

3.のコード  
最後に補完リストを削除します

[code]

      $(".spot_search_result").on("click", ".list-group-item", function (event) {
        const val = event.target.dataset.spotName || event.target.dataset.spotLocation;
        $("#spot_search").val(val);
        $(".spot_search_result").empty();
      });
    
[/code]


CC BY-SA 4.0
2021-07-26T07:44:12.557
78411
2021-07-26T07:44:12.557
298
78393
answer