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

Ask A Question

Notifications

You’re not receiving notifications from this thread.

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

Omar Khedr asked in Rails

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;
}
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 33,665+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.