Я пытаюсь создать простую панель поиска, чтобы показать/скрыть контент в моем приложении rails. В частности, пытаясь разрешить кому-то искать конкретного пользователя через имя пользователя в моем чате, которые отображаются с использованием каждого массива Rails. Я рассмотрел эти два вопроса для руководства, но все равно не получил его для работы. Поиск на странице с использованием contains() для отображения/скрытия содержимого div и функции Dynamical search-show для отображения/скрытия div. Всякий раз, когда я набираю имя пользователя, но в моем окне поиска ничего не появляется. Я перечислил свой код ниже, и любая помощь по этому вопросу будет потрясающей. Спасибо вам большое!
index.html.erb
<div class="col-md-4">
<form name="searchBox">
Search for a User: <input type="text" name="keyword" />
<input type="button" value="Search" onClick="searchFunction()" />
</form>
<% (User.all - [current_user]).each do |user| %>
<div class="box2" style="display:none" id="searchable">
<%= image_tag user.background, height: 95, width: 165, class: "css-style4" %>
<strong><%= link_to user.username, direct_message_path(user.id), data: {behavior: "chatroom-link", chatroom_id: Chatroom.direct_message_for_users([current_user, user]).id} %></strong>
</div>
<% end %>
</div>
chatroomsearch.js
$(document).on('turbolinks:load',function(){
function searchFunction() {
$("#searchable")
.hide()
.filter(":contains('" + $("input[name='keyword']").val() + "')")
.show();
}
}
Ваша проблема в этой строке:
<div class="box2" style="display:none" id="searchable">
Идентификаторы должны быть уникальными. Следовательно, удалите их и используйте их как класс, например:
<div class="box2 searchable" style="display:none">
Таким образом вам нужно изменить селектор:
$("#searchable")
чтобы:
$(".searchable")
Фрагмент:
function searchFunction() {
$(".searchable")
.hide()
.filter(":contains('" + $("input[name='keyword']").val() + "')")
.show();
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-4">
<form name="searchBox">
Search for a User: <input type="text" name="keyword"/>
<input type="button" value="Search" onClick="searchFunction()"/>
</form>
<div class="box2 searchable" style="display:none">
<strong><a href='/direct_messages/1' data-behavior="chatroom-link"
data-chatroom_id="Chatroom.direct_message_for_users([current_user, user]).id">Rodrigo1 Williams</a></strong>
</div>
<div class="box2 searchable" style="display:none">
<strong><a href='/direct_messages/1' data-behavior="chatroom-link"
data-chatroom_id="Chatroom.direct_message_for_users([current_user, user]).id">Rodrigo2 Williams</a></strong>
</div>
</div>
<strong><%= link_to user.username, direct_message_path(user.id), data: {behavior: "chatroom-link", chatroom_id: Chatroom.direct_message_for_users([current_user, user]).id} %></strong>
Bc, когда я набираю имя пользователя, оно не вызывает его.