How can I use Rails Each Array and In-page search to show/hide div content

I'm trying to set up a simple search bar to show/hide content in my rails app. Specifically, trying to allow someone to search for a specific user via username in my chatroom which are being shown using a Rails each array. I looked at these two SO questions for guidance but still didn't get it to work - https://stackoverflow.com/questions/6709718/in-page-search-using-contains-to-show-hide-div-content and https://stackoverflow.com/questions/34353009/dynamical-search-function-to-show-hide-divs. Whenever, I type a user's name though in my search box nothing appears. I have listed my code below and any help on this matter would be amazing. Thank you so much!

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

function searchFunction() {
$("#searchable")
    .hide()
    .filter(":contains('" + $("input[name='keyword']").val() + "')")
    .show();
}

Hi,

You might want to check out this site too. It has a ton of guides on Rails: http://guides.rubyonrails.org/v2.3.11/form_helpers.html

Hope this helps! :)

Found the correct way that worked, leaving the code below in case anyone else needs help with it.

Index.html.erb

<div class="col-md-4">
                     <form name="searchBox" onsubmit="return searchFunction(this);">
                    Search for a User: <input type="text" name="keyword" />
                    <input type="submit" value="Search"/>
            </form>

            <div class='searchHints' style="display:none;">
              <span>No results</span>
            </div>

                <% (User.all - [current_user]).each do |user| %>
                    <div class="box2 searchable" style="display:all" data-username="<%= user.username %>">
                                <%= image_tag user.background, height: 95, width: 165, class: "css-style4"   %>
                                <div class="row">
                                <div class="col-md-4">      
                                    <%= image_tag user.avatar, height: 60, width: 55, class: "css-style5"   %>
                                </div>
                                <div class="col-md-6">
                                </div>
                                <div class="col-md-2">
                                </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>
                    </div>  
                <% end %>
                </div>

chatroomsearch.js

function searchFunction(elem) {
    var keyword, $searchableElements, $filteredElems;

    keyword = $(elem).find('input[name="keyword"]').val();
    $searchableElements = $(".searchable");

    $searchableElements.hide();
    $('.searchHints').hide();

  var $filteredElems= $searchableElements.filter(function(index, element){
    return (new RegExp(keyword, 'i')).test(element.dataset.username);
  })

  if($filteredElems.length > 0) {
    $filteredElems.show();
  } else {
    $('.searchHints').show();
  }

  return false;
}