Как использовать Rails Каждый поиск в массиве и на странице для показа / скрытия содержимого div

1

Я пытаюсь создать простую панель поиска, чтобы показать/скрыть контент в моем приложении 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();
}
}
  • 0
    Вы обернули свою функцию searchFunction в функцию $ (document) .ready ()?
  • 0
    @SarmadSabih Я использовал $ (document) .on ('turbolinks: load', function () {который я считаю заменой document.ready
Теги:
ruby-on-rails-5

1 ответ

1
Лучший ответ

Ваша проблема в этой строке:

<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>
  • 0
    Большое спасибо за вашу помощь, ваши объяснения потрясающие, но они все еще не работают для меня. У меня такое чувство, что это может быть связано с этой строкой из rails <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, когда я набираю имя пользователя, оно не вызывает его.
  • 0
    Пытаясь понять это, никогда не делали так, чтобы рубиновая строка в html конвертировалась раньше. Чтение документации прямо сейчас.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню