検索機能のオートコンプリートについて

[shohei0808]

• 質問内容・実現したいこと 検索機能をオートコンプリート化したい

• 現状発生している問題・エラーメッセージ GitHubのドキュメントを参考に実装を試みたが上手く作動しない

• どの処理までうまく動いているのか 作成したjsファイル自体上手く読み込まれてない模様

• 試したこと オートコンプリートが上手くいかない原因がまずjsファイルの読み込みができていないと考え、 下記の記事を参考にjsファイル自体まず読み込まれているか確認したところ上手くできなかった。 https://note.com/y0419y/n/nd84ebfb88488 https://zenn.dev/iloveomelette/scraps/4e033878f84b56 https://qiita.com/PenPe/items/86c17307f038434c373a

app/javascript/application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import jquery from "jquery"
window.$ = jquery
import "@fortawesome/fontawesome-free"
import "./custom/stimulus-autocomplete";

config/importmap.rb

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.4/dist/jquery.js"
pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.4.0/js/all.js"
pin "stimulus-autocomplete", to: "https://ga.jspm.io/npm:stimulus-autocomplete@3.1.0/src/autocomplete.js"
pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:@hotwired/stimulus@3.2.1/dist/stimulus.js"
pin_all_from 'app/javascript/custom', under: 'custom'

app/javascript/custom/stimulus-autocomplete.js

window.onload = function () {
  alert("HELLO WORLD");
};

[tmtkzk0823]

JSに関連する場合、開発者ツールのコンソール画面にエラーメッセージなどが表示されている可能性がありますので、ご確認をお願いします！

[shohei0808]

一応JSに関するエラーは出てないみたいです。

[kerochelo]

@shohei0808 おそらく参考にした記事に言葉たらずなどで問題がありそうなので、importmapの公式のGitHubからやってみるといいかと！ https://github.com/rails/importmap-rails https://techracho.bpsinc.jp/hachi8833/2022_06_29/112183

詳細情報を加えてChatGPTに聞いてみるのもいいですね！

[shohei0808]

@kerochelo ご丁寧に返信ありがとうございます。 まずはimportmap-railsを紐解いてからJSファイルが読み込まれるのを確認してから検索のオートコンプリートに取り掛かりたいと思います。