Я хочу, чтобы при вводе чего-либо в моей строке поиска на странице оставались только карточки с таким именем, а все остальное исчезало. Я пробовал некоторые вещи, но мне это никогда не удавалось. Вот код, с которым я работаю.
Сама панель навигации:
<head>
</head>
<body>
<div id="mysearch" class="search_card">
<div class="card">
<div class="row">
<div class="col-md-4">
<div class="music-description">
<h1>Mijn Muziek</h1>
</div>
</div>
<div class="col-md-8">
<div class="d-flex justify-content-center">
<div class="searchbar">
<input class="search_input" id="myInput" type="text" placeholder="Zoeken" >
<a href="#" class="search_icon"><i class="fas fa-search fa-lg"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="my_music_new">
<%if logged_in?(:site_admin)%>
<%= link_to 'Nieuw', new_my_music_path %>
<% end %>
</div>
<%= render @my_musics %>
</div>
</body>
@ my_musics содержит карточки.
_my_musics:
<body>
<div class="music_card">
<div class="card data-id="<%= my_music.id %>">
<div class="row">
<div class="col-md-5">
<div class="my_music_img">
<% if my_music.image == ""%>
<%= image_tag "img_not_found" %>
<% elsif my_music.image.length < 8 %>
<%= image_tag "img_not_found" %>
<% else %>
<img src="<%= my_music.image %>">
<% end %>
</div>
</div>
<div class="col-md-7">
<div class="my_music_title">
<h2><%= my_music.title %></h2>
</div>
<div class="my_music_description">
<p><%= markdown my_music.description %></p>
</div>
<% if my_music.page_number > 0 %>
<div class="row">
<div class="col-md-3">
<div class="my_music_pages">
<% if my_music.page_number > 0 %>
<p>Paginas: <%= my_music.page_number %></p><br><br><br>
<% else %>
<% end %>
</div>
</div>
<div class="col-md-9">
<div class="my_music_year">
<% if my_music.year > 0 %>
<p>Uitgekomen in: <%= my_music.year %></p><br><br><br>
<% else %>
<% end %>
</div>
</div>
</div>
<% else %>
<div class="my_music_year">
<% if my_music.year > 0 %>
<p>Uitgekomen in: <%= my_music.year %></p><br><br><br>
<% else %>
<% end %>
</div>
<% end %>
<div class="down_lis_buttons">
<div class="row">
<div class="col">
<div class="my_music_listen">
<% if my_music.listen == "" %>
<div class="my_music_listen_1">
<a class="fab fa-youtube fa-3x"></a>
</div>
<% elsif my_music.listen.length < 5 %>
<div class="my_music_listen_1">
<a class="fab fa-youtube fa-3x"></a>
</div>
<% else %>
<div class="my_music_listen_2">
<a class="fab fa-youtube fa-3x" href="<%= my_music.listen %>"></a>
</div>
<% end %>
</div>
</div>
<div class="col">
<div class="my_music_download">
<% if my_music.download.length == 0 %>
<div class="my_music_download_1">
<a class="fas fa-file-download fa-3x"></a>
</div>
<% elsif my_music.download.length < 5 %>
<div class="my_music_download_1">
<a class="fas fa-file-download fa-3x"></a>
</div>
<% else %>
<% if my_music.reserved == 1 %>
<% if logged_in?(:special, :site_admin) %>
<div class="my_music_download_2">
<a class="fas fa-file-download fa-3x" href="<%= my_music.download %>" download></a>
</div>
<% else %>
<div class="tool-tip">
<a class="fas fa-file-download fa-3x">
</a>
<span>
U hebt niet de vereiste toestemming om deze actie uit te voeren.
</span>
</div>
<% end %>
<% elsif current_user.is_a?(GuestUser) %>
<div class="tool-tip">
<a class="fas fa-file-download fa-3x">
</a>
<span>
Meld u aan om deze actie uit te voeren.
</span>
</div>
<% else %>
<div class="my_music_download_2">
<a class="fas fa-file-download fa-3x" href="<%= my_music.download %>" download></a>
</div>
<% end %>
<% end %>
</div>
</div>
</div>
</div>
<div class="my-musics-button">
<div class="card">
<div class="row">
<div class="col-md-2">
<%= link_to fa_icon('book size: 2x'), toggle_status_my_music_path(my_music), style: my_music_status_color(my_music) if logged_in?(:site_admin) %>
</div>
<div class="col-md-5">
<%if logged_in?(:site_admin)%>
<div class="button" role="button">
<%= link_to 'Bewerken', edit_my_music_path(my_music), style: 'text-decoration: none;' %>
</div>
<% end %>
</div>
<div class="col-md-5">
<%if logged_in?(:site_admin)%>
<div class="button" role="button">
<%= link_to 'Verwijderen', my_music, method: :delete, data: { confirm: 'Are you sure?' }, style: 'text-decoration: none;'%>
</div>
<% else %>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Есть ли простой способ сделать это?
Спасибо!