Search Bars in Ruby on Rails and Javascript

Search bars in websites allows us to search for content instantly and with ease. Whether it’s looking for a user through their username in a social media site or whether you’re searching for a clothing brand when shopping online, you have most likely used search bars to get the content you wanted. I am going to share with you two different ways in which users can create search bars by using ruby on rails and javascript.

Ruby on Rails:

Using ruby on rails, I created a search bar where users can search for other users using their usernames.

Assuming that you have already created a working rails application and environment with all the models, controllers, and views set up, in the users controller’s page you can add the code below to your index function:

def index
if params[:username]
@user = User.where('user LIKE ?', "%{params[:username]}%")
else
@user= User.all
end
end

This function will search for a certain user by using params to search for a specific username. If the params matches the username, the search bar will show you that certain username. Else, if that certain username can’t be found, the index page ‘/users’ will show you all the users.

Remember to add this user_params private method in the user’s controller to permit the :username field in the search form.

def user_params
params.require(:user).permit(:email, :username, :password)
end

Users Index Page: In the user’s index view page, you will need to add this form below:

<%= form_tag(users_path, method: :get) do %>
User <%= text_field_tag :username, params[:username] %>
<%= submit_tag 'Search'%>
<% end %>

This search form is creating the search bar on the show page, and using the GET method to make a request to show us the username that we are looking for. When the search is submitted, the search form will make a GET request from the users_path url. In the text_field_tag, params[:username] is the value for the text field that is used to search for the user with that username.

Javascript:

Using javascript, in index.html, you would first have to link your index.js file in the script tag and the index.css file as shown below.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src= "index.js"></script>
<link rel="stylesheet" href="styles/index.css">
</head>
<body>
<div class="search-bar">
<input type="text" name="search" autocomplete="off"
id="myInput" onkeyup="myFunction()" placeholder="Search">
</div>
<ul id="wrapper">
<li><a href="#">Amy</a></li>
<li><a href="#">Ana</a></li>
<li><a href="#">Ben</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Carol</a></li>
<li><a href="#">Chris</a></li>
<li><a href="#">Dan</a></li>
<li><a href="#">Daren</a></li>
<li><a href="#">Ed</a></li>
<li><a href="#">Emily</a></li>
</ul>
</body>
</html>

To create a search-bar we have to input the type of form like this in Index.html:

<input type=”text” name=”search” autocomplete=”off” id=”myInput”
onkeyup=”myFunction()” placeholder=”Search”>

This code above is saying to create a search-bar where it will execute the javascript function myFunction() when a user releases a key.

In the ul id=”wrapper” a list of names are presented where the user will be able to search for these names with a search bar. A href attribute is used here so that users will be able to input the url that will link the searched name to that url page. Since we don’t have any linked urls as of now, a “#” is used instead of an url in this case.

Index.js- This is where the myFunction() function should be.

function myFunction() {
let userInput, userInputCapitalized, listedNameId, listedName, a;
    userInput = document.getElementById('myInput'); 
/input value
userInputCapitalized = input.value.toUpperCase();
/make input value case insensitive
listedNameId = document.getElementById("wrapper");
listedName = listedNameId.getElementsByTagName('li');
/names on list
for (let i = 0; i < listedName.length; i++) {
a = listedName[i].getElementsByTagName("a")[0];
/iterating to get the name from the a tag
if (a.innerHTML.toUpperCase().indexOf(userInputCapitalized) > -1) {
listedName[i].style.display = "";
} else {
listedName[i].style.display = "none";
}
}}

Here, we are going to iterate through the elements in the <li a> tag which will be our name list and compare it to our filter variable which are the input values with an id = “myInput”. If the index of the element in the <li a > tag is greater than -1 it will iterate through those elements and display those character names when an user types in a key. Else, if the listed name and inputed key doesn’t match, it will display nothing.

After adding the above codes in your index.html and index.js files, you will be able to see a functional search form like below:

To add some styling to your search bar and the name inputs, you can add these code below in the index.css file:

#myInput {
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;}
.search-bar {
position: fixed;
display: inline-block;
left: 50%;
top: 8px;
transform: translateX(-50%);
width: 95%;
max-width: 400px;
height: 45px;
background: #fff;
border-radius: 2px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
overflow: hidden;}
#wrapper {
list-style: none;
display: inline-block;
margin-top: 100px;}
#wrapper li {
border: 1px solid #ddd;
margin-top: -1px;
width: 200px;
height: 100px;
background: #e7eceb;
float: left;
margin: 10px;
border-radius: 2px;
text-align: center;}
#wrapper a{
font-size: 24px;
color: #333594;
line-height: 100px;
font-family: -webkit-body;
text-decoration: none;
margin: 0;
padding: 0;}

After adding some styling in your index.css file, you will be able to see: