CODEWITHSUNDEEP
javascriptfunctionsearchsearchbar
user24044804
user24044804

Reputation: 19

How to create a basic search bar in javascript

I pretty much copied a vary basic search bar that is functional using HTML, CSS and Javascript.

When you type something in the search bar it does show up in the console.

The results are supposed to go from the home index.html to a different page: searchresults.html and display on the page.

I do not understand what part of the function is not working and why it will not display on the second page at all.

Inspiration: https://codepen.io/simplyramaken/pen/dyqVPBz

My code:

https://codepen.io/sarahprogram/pen/abxQydz

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Finance Blog</title>

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-        awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<header>
<h1>Finance Blog</h1>

    <div class="search-div">
      <form action="searchresults.html" method="get" onclick="searchResult ()">
     <button type="submit" class="search-button" id="search-b"><i class="fa fa-search" style="font-size:24px"></i></button>
      <input type="text" class="search" id="search-i" placeholder="search...">
    </form>
    </div>

  <nav>
  <ul>
  <li>
   <a href="deals.html" class="nav-bar" id="deals">Deals</a>
  </li>
  <li>
  <a href="free.html" class="nav-bar" id="free">Free</a>
  <li>
    <a href="savingmoney.html" class="nav-bar" id="savingmoney">Saving Money</a>
  </li>
  <li>
    <a href="investing.html" class="nav-bar" id="investing">Investing</a>
  </li>
  <li>
    <a href="makemoney.html" class="nav-bar" id="makemoney">Make Money</a>
  </li>
  <li>
    <a href="recipies.html" class="nav-bar" id="recipes">Recipies</a>
  </li>
</ul>
</nav>
</header>

<main>
<section class="blog"> 

<div class="BlogContainer">
  <a href="#">
  <img src="" alt="" class="blog-img">
    <h2 class="blog-title">FREE Workouts: My Favorite Fun Youtube Workout Channel</h2>
  <p class="blog-copy"></p>
  <span class="time"></span>
</a>
</div>

<div class="BlogContainer">
<a href="#" class="bloglink">
 <img src="" alt="" class="blog-img">
<h2 class="blog-title">How to Get FREE Coffee Grounds from Starbucks for Your Garden!
  </h2>
  <p class="blog-copy"></p>
  <span class="time"></span>
  </a>
</div>

<div class="BlogContainer">
  <a href="#">
  <img src="" alt="" class="blog-img">
  <h2 class="blog-title">My Favorite Simple and Easy Credit Card 
  </h2>
  <p class="blog-copy"></p>
  <span class="time"></span>
</a>
</div>

</section>


<div class="sidebar">
<aside>
<div><img src="pig.image" alt="pig photo" class="aside-img"></div>

<br>

<div>
  <p class="aside-p">Sign up to never miss a post!</p>
  <br>
  <form method="post">
  <input type="text" class="aside-input" placeholder="YOUR EMAIL ADDRESS" pattern=".+@example\.com" required>
  <br>
  <button class="button-submit">SIGN UP</button>
  </form>
</div>

<br>

<div class="social">
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-tiktok"></a>
<a href="#" class="fa fa-instagram"></a>
</div>


</aside>
</div>
</main>


<div class="container-pagination">
<div class="pagination">
    <ul>
    <li><a href="" class="pagination-previous">Previous</a></li>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="" class="pagination-next">Next</a></li>
    </ul>
</div>
</div>





<footer>

<div class="social-footer">
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-tiktok"></a>
<a href="#" class="fa fa-instagram"></a>
</div>

<div class="footer-content">
<p><a href="about.html" class="footer-p" id="about">About</a></p>
<br>
<p><a href="contact.html" class="footer-p" id="contact">Contact</a></p>
<br>
<p><a href="privacy.html" class="footer-p" id="privacy">Privacy Policy</a></p>
<br>
<p><a href="terms.html" class="footer-p" id="terms">Terms</a></p>
</div>

</footer>

<p class="footer-copyright" id="date"></p>

<script src="js.js"></script>

</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="searchresults.css">
<title>Search Results</title>
</head>
<body>
<div>
<ul id="search-results"></ul>
</div>
<script src="js.js"> 
</script>
</body>
</html>



* {
margin: 0;
padding: 0;
}

html body { 
overflow: auto; 
height: 100%;
}

header {
display: flex;
}

body {
height: 100%;
}

h1 {
color: #FB6F92;
margin-top: 82px;
margin-left: 40px;
margin-bottom: 10px;
}

.search-div {
position: absolute;
right: 25px;
margin-top: 82px;
display: flex;
}

.search-button {
color:#FB6F92;
margin: 5px;
border: none;
background: none;
padding: 0;

}

.search {
position: relative;
border-color:#FB6F92;
width: 250px;
border-style: solid;
padding: 6px;
border-radius: 25px;
font-size: 16px;
}

nav {
position: fixed;
top: 0px;
width: 100%;
height: 50px;
background-color: #fbe5e5;
font-family: arial;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}

nav a {
  text-align: center;
  display: inline-block;
}

nav ul li a {
color: #FB6F92;
text-decoration: none;
}

li {
display: inline;
margin: 20px;
}

.nav-bar:hover {
color: gray;
}

main {
display: flex;
}

.blog {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 0px;
width: 80%;
}

.BlogContainer {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: auto auto auto;
grid-auto-rows: 0px;
overflow: hidden;
width: 25%;
margin: 15px;
}

.blog-title {
color: black;
font-family: 'Times New Roman', Times, serif;
font-size: 20px;
overflow: wrap;
}

.BlogContainer a h2:hover {
color: gray;
}

.BlogContainer a {
text-decoration: none;
}

.blog-img {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

.next-page {
font-family: Arial;
position: relative;
display: flex;
justify-content: center;
}

.next-page a {
text-decoration: none;
color: black;
display: flex;
justify-content: center;
position: absolute;
bottom: 0;
}

.sidebar {
position: relative;
display: flex;
flex-grow: 1;
justify-content: center;
margin-top: 35px;
}

aside {
color: black;
font-family: arial;
position: sticky;
display: flex;
flex-direction: column;
overflow: auto;

}

.aside-img {
width: 200px;
height: 200px;
margin-bottom: 30px;
margin-left: 9px;
}

.aside-p {
font-weight: bold;
font-size: 16px;
}

.aside-input {
margin-bottom: 5px;
width: 209px;
color: black;
border-style: solid;
padding: 5px;
border-color: black;
font-size: 14px;
}

.aside-span {
font-weight: bold;
font-size: 22px;
}

.button-submit {
font-weight: bold;
font-size: 14px;
margin-bottom: 30px;
padding: 6px;
color:#FB6F92;
background-color: #fbe5e5;
width: 223px;
border-style: none;

}

.social a {
 color: black;
 text-decoration: none;
 }


.container-pagination {
text-align: center;
margin-bottom: 50px;
}

.container-pagination a {
color: black;
text-decoration: none;
}

footer {
width: 100%;
height: 298px;
font-family: arial;
background-color: #fbe5e5;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}

.social-footer {
margin-top: 20px;
margin-left: 25px;
}

.social-footer a {
color: black;
text-decoration: none;
}

.footer-content {
grid: 2/4fr;
margin-top: 20px;
}

.footer-copyright {
width: 100%;
text-align: center;
font-size: 14px;
color: black;
font-family: arial;
background-color: #fbe5e5;
display: block;
padding-bottom: 10px;
}

.footer-p {
color: black;
text-decoration: none;
}




const search = document.getElementById('search-i');
const links = document.getElementsByClassName('.blog-title');

function searchResult() {

search.addEventListener("click", searchResult);
const searchValue = search.value.toLowerCase();

for (let i = 0; i < links.length; i++) {
const text = links[i].textContent.toLowerCase();                                                 
  if (text.includes(searchValue)) {
document.getElementById('search-results').innnerHMTL;
    links[i].style.display = 'block';
  } else {
document.getElementById('search-results').innerHTML;
    links[i].style.display = 'none';
  }
}
console.log(searchValue);
};

console.log(searchResult);
}

I do not know why the javascript does not display the results on page

Upvotes: 0

Views: 41

Answers (0)

Related Questions