映画検索のオートコンプリート

[emma1278-my]

JavaScriptを使用

• [x] コントローラーに新しいアクションを追加
  • [x] movies_controller.rb

def autocomplete query = params[:query] movies = Movie.where('title LIKE ?', "%#{query}%").limit(10) render json: movies.map(&:title) end end

• [x] config/routes.rb にルートを追加

resources :movies do get :autocomplete, on: :collection end

• [ ] JavaScriptでオートコンプリート機能を実装

document.addEventListener("DOMContentLoaded", function() { const searchInput = document.querySelector('input[name="looking_for"]'); const autocompleteList = document.createElement('ul'); autocompleteList.classList.add('autocomplete-list'); searchInput.parentNode.appendChild(autocompleteList);

searchInput.addEventListener('input', function() { const query = this.value;

if (query.length < 2) {
  autocompleteList.innerHTML = '';
  return;
}

fetch(`/movies/autocomplete?query=${query}`)
  .then(response => response.json())
  .then(data => {
    autocompleteList.innerHTML = '';
    data.forEach(item => {
      const listItem = document.createElement('li');
      listItem.textContent = item;
      listItem.classList.add('autocomplete-item');
      listItem.addEventListener('click', function() {
        searchInput.value = item;
        autocompleteList.innerHTML = '';
      });
      autocompleteList.appendChild(listItem);
    });
  });

}); });

• [ ] ビューに記載
  • [ ] assets/stylesheets/application.tailwind.css

.autocomplete-list { position: absolute; z-index: 1000; background-color: white; border: 1px solid #ccc; width: 100%; list-style-type: none; padding: 0; margin: 0; }

.autocomplete-item { padding: 8px; cursor: pointer; }

.autocomplete-item:hover { background-color: #f0f0f0; }