What is the best way to conceal an element so that it only becomes visible when a user begins to input text

Question

What is the best way to conceal an element so that it only becomes visible when a user begins to input text

Hey there! I'm in the process of adding a search feature to my Jekyll site, and I've opted to use Simple-Jekyll-Search, which you can check out here: Link.

Take a peek at what's inside my search.html:

<input type="text" id="my-search-input" placeholder="Search">

<div class="card">  
  <ul id="my-results-container"></ul>
</div>

<script src="/assets/javascript/simple-jekyll-search.min.js" type="text/javascript"></script>

<script>
SimpleJekyllSearch({
  searchInput: document.getElementById('my-search-input'),
  resultsContainer: document.getElementById('my-results-container'),
  searchResultTemplate: '[...]',
  json: '/search.json',
  noResultsText: '<li><p>No results found!</p></li>'
})
</script>

The search functionality is working smoothly so far. But here's the thing - that bordered card pops up even when the search bar is empty. So, my burning question is:

Any ideas on how I can keep the card hidden until the user starts typing something?

https://i.sstatic.net/Y7ANv.png

html css bootstrap-4 jekyll

Answer 1

Answer №1

To start off, make sure to hide the card class in your stylesheet:

.card{
    display:none;
}

Next, add the following code inside a script tag:

$(function() {
     $('#my-search-input').keyup(function() {
         if ($(this).val().length == 0) {
             $('.card').hide();
         } else {
             $('.card').show();
         }
     }).keyup();
});

Assuming you have included jQuery in your code, otherwise add this code in the head tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

To start off, make sure to hide the card class in your stylesheet:

.card{
    display:none;
}

Next, add the following code inside a script tag:

$(function() {
     $('#my-search-input').keyup(function() {
         if ($(this).val().length == 0) {
             $('.card').hide();
         } else {
             $('.card').show();
         }
     }).keyup();
});

Assuming you have included jQuery in your code, otherwise add this code in the head tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 3

Answer №2

Here is a method to achieve the same result without using jQuery:

function displayBox(){
//Identifying the target div
box=document.getElementById("box");
//Accessing the input element
input=document.getElementById("input");

//Checking if the user has entered any value
if(!input.value==""){
  //Display the box if there is input
  box.style.display="block";
}else{
  //Hide the box if no input
  box.style.display="none";
}
}

/*Styling relevant to the site*/
body{background:#121212;color:white;font-family:Helvetica, sans-serif;}

/*Styling relevant to the site*/
#input{
background:#222222;
color:white;
padding:5px;
border:1px solid white;
}

/*Important styling for box*/
#box{
display:none;
/*Styling relevant to the site*/
border:1px solid white;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Enter something whimsical:</p>
<input type="text" id="input" onkeyup="displayBox();">
<div id="box">Voila! I have appeared.</div>
</body>
</html>

Answer 4

Here is a method to achieve the same result without using jQuery:

function displayBox(){
//Identifying the target div
box=document.getElementById("box");
//Accessing the input element
input=document.getElementById("input");

//Checking if the user has entered any value
if(!input.value==""){
  //Display the box if there is input
  box.style.display="block";
}else{
  //Hide the box if no input
  box.style.display="none";
}
}

/*Styling relevant to the site*/
body{background:#121212;color:white;font-family:Helvetica, sans-serif;}

/*Styling relevant to the site*/
#input{
background:#222222;
color:white;
padding:5px;
border:1px solid white;
}

/*Important styling for box*/
#box{
display:none;
/*Styling relevant to the site*/
border:1px solid white;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Enter something whimsical:</p>
<input type="text" id="input" onkeyup="displayBox();">
<div id="box">Voila! I have appeared.</div>
</body>
</html>

What is the best way to conceal an element so that it only becomes visible when a user begins to input text

Answer №1

Answer №2

Similar questions

The images are not clickable when trying to hyperlink them

What is the process for inheriting HTML templates?

Is there a way to escape from an iFrame but only for specific domains?

Using the Croppie plugin to crop an image before uploading via jQuery Ajax in PHP

Elements displaying outside of block 'a' tag

Skipping is a common issue encountered when utilizing Bootstrap's Affix feature

demonstrating how to display a bootstrap tab by clicking a button`s onClick function

Deactivate options in the dropdown selection

JSP generates unconventional HTML output

Navigate through an overflowing element in react/next

Is it possible to utilize arrow functions in Vue while using style binding?

Tips for saving JavaScript results to a form

Is there a way to extract the visible text from an HTML TextNode without including the HTML tags?

Leveraging the :checked state in CSS to trigger click actions

Implementing a pop-up notification at the center of the display for empty fields

What is the best way to achieve a curved outer edge for a rectangle using CSS?

What is the process for integrating vue-select into the dialog of JqxScheduler?

Enhance data validation in PHP

Retrieve the selected option value from a dropdown menu when hovering or making a change within the same event

Div content with a unique angle