Simple Search bar, that shows 2019 Community Moderator ElectionMake a div fill the height of the remaining screen spaceHow to horizontally center a <div>?How to make div not larger than its contents?How to align content of a div to the bottom?JavaScript closure inside loops – simple practical exampleCreating a div element in jQueryHow to replace innerHTML of a div using jQuery?How to make a div 100% height of the browser window?How do I auto-resize an image to fit a div containerCannot display HTML string
Have researchers managed to "reverse time"? If so, what does that mean for physics?
Gravity magic - How does it work?
Did Ender ever learn that he killed Stilson and/or Bonzo?
Min function accepting varying number of arguments in C++17
A sequence that has integer values for prime indexes only:
Life insurance that covers only simultaneous/dual deaths
Identifying the interval from A♭ to D♯
What's the meaning of “spike” in the context of “adrenaline spike”?
PTIJ: Who should I vote for? (21st Knesset Edition)
What has been your most complicated TikZ drawing?
How to explain that I do not want to visit a country due to personal safety concern?
How to terminate ping <dest> &
Who is flying the vertibirds?
How to write cleanly even if my character uses expletive language?
How to change two letters closest to a string and one letter immediately after a string using notepad++
Dice rolling probability game
compactness of a set where am I going wrong
What do Xenomorphs eat in the Alien series?
Hacking a Safe Lock after 3 tries
Is it normal that my co-workers at a fitness company criticize my food choices?
Why would a flight no longer considered airworthy be redirected like this?
Why did it take so long to abandon sail after steamships were demonstrated?
A Cautionary Suggestion
Why do Australian milk farmers need to protest supermarkets' milk price?
Simple Search bar, that shows
2019 Community Moderator ElectionMake a div fill the height of the remaining screen spaceHow to horizontally center a <div>?How to make div not larger than its contents?How to align content of a div to the bottom?JavaScript closure inside loops – simple practical exampleCreating a div element in jQueryHow to replace innerHTML of a div using jQuery?How to make a div 100% height of the browser window?How do I auto-resize an image to fit a div containerCannot display HTML string
okay, I have been looking for some time now, and I have not been able to finde a solution yet, so I hope it's not a stupid question...
I Have made a very simple website, to show random recipes, when you just don't know what to make for dinner, and I would like to be able to also search for the recipes, if you know what you want, or just checking for spelling mistakes or what not...
the recipes are just text in a < div >, and I have made them like this
<div id="1" class="recipe">
<h2>name</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>
then I used this css to hide it
.recipe
display:none;
and then I made a button that shows them at random with this (so far I have 15 recipes)
function RandomDiv() {
var myarray= new Array("1","2","3","4","5","6","7","8","9","10","11","12","13","14","15");
var ChosenDiv = myarray[Math.floor(Math.random() * myarray.length)];
document.getElementById(ChosenDiv).style.display="inline-block";
</scipt>
I have no idea if theres is a simpler way to do the same, but so far it works
and now I would like to have a search bar in a < topnav > where I could write the name, and when I press submit it would show me the < div > the same way as the button does
I hope that this makes any kind of sense, and if there is something I forgot, I'm sorry, please tell me what I did wrong
javascript html
add a comment |
okay, I have been looking for some time now, and I have not been able to finde a solution yet, so I hope it's not a stupid question...
I Have made a very simple website, to show random recipes, when you just don't know what to make for dinner, and I would like to be able to also search for the recipes, if you know what you want, or just checking for spelling mistakes or what not...
the recipes are just text in a < div >, and I have made them like this
<div id="1" class="recipe">
<h2>name</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>
then I used this css to hide it
.recipe
display:none;
and then I made a button that shows them at random with this (so far I have 15 recipes)
function RandomDiv() {
var myarray= new Array("1","2","3","4","5","6","7","8","9","10","11","12","13","14","15");
var ChosenDiv = myarray[Math.floor(Math.random() * myarray.length)];
document.getElementById(ChosenDiv).style.display="inline-block";
</scipt>
I have no idea if theres is a simpler way to do the same, but so far it works
and now I would like to have a search bar in a < topnav > where I could write the name, and when I press submit it would show me the < div > the same way as the button does
I hope that this makes any kind of sense, and if there is something I forgot, I'm sorry, please tell me what I did wrong
javascript html
other than you do not need an array, it is fine. Probably want to use"block"
instead of"inline-block"
or have another class that has.reciepe.show display: block;
and add the class to show it.
– epascarello
Mar 7 at 14:18
You can implement a live search bar, as described here: w3schools.com/howto/howto_js_filter_lists.asp. Instead of hiding the ones you don't need, just show the one you want to see.
– Marten
Mar 7 at 14:18
it's more like, I like when you open the site, it's pretty much just a button (and search bar) and then it only shows one recipe and I must admit HTML and CSS, I'm beginning to get the hang off, but javascript, I get a little bit, but still pretty lost so when I read var input, filter, ul, li, a, i, txtValue; then it filters ul, li, a, and i?
– Nep Pedersen
Mar 7 at 14:36
add a comment |
okay, I have been looking for some time now, and I have not been able to finde a solution yet, so I hope it's not a stupid question...
I Have made a very simple website, to show random recipes, when you just don't know what to make for dinner, and I would like to be able to also search for the recipes, if you know what you want, or just checking for spelling mistakes or what not...
the recipes are just text in a < div >, and I have made them like this
<div id="1" class="recipe">
<h2>name</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>
then I used this css to hide it
.recipe
display:none;
and then I made a button that shows them at random with this (so far I have 15 recipes)
function RandomDiv() {
var myarray= new Array("1","2","3","4","5","6","7","8","9","10","11","12","13","14","15");
var ChosenDiv = myarray[Math.floor(Math.random() * myarray.length)];
document.getElementById(ChosenDiv).style.display="inline-block";
</scipt>
I have no idea if theres is a simpler way to do the same, but so far it works
and now I would like to have a search bar in a < topnav > where I could write the name, and when I press submit it would show me the < div > the same way as the button does
I hope that this makes any kind of sense, and if there is something I forgot, I'm sorry, please tell me what I did wrong
javascript html
okay, I have been looking for some time now, and I have not been able to finde a solution yet, so I hope it's not a stupid question...
I Have made a very simple website, to show random recipes, when you just don't know what to make for dinner, and I would like to be able to also search for the recipes, if you know what you want, or just checking for spelling mistakes or what not...
the recipes are just text in a < div >, and I have made them like this
<div id="1" class="recipe">
<h2>name</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>
then I used this css to hide it
.recipe
display:none;
and then I made a button that shows them at random with this (so far I have 15 recipes)
function RandomDiv() {
var myarray= new Array("1","2","3","4","5","6","7","8","9","10","11","12","13","14","15");
var ChosenDiv = myarray[Math.floor(Math.random() * myarray.length)];
document.getElementById(ChosenDiv).style.display="inline-block";
</scipt>
I have no idea if theres is a simpler way to do the same, but so far it works
and now I would like to have a search bar in a < topnav > where I could write the name, and when I press submit it would show me the < div > the same way as the button does
I hope that this makes any kind of sense, and if there is something I forgot, I'm sorry, please tell me what I did wrong
javascript html
javascript html
asked Mar 7 at 14:15
Nep PedersenNep Pedersen
83
83
other than you do not need an array, it is fine. Probably want to use"block"
instead of"inline-block"
or have another class that has.reciepe.show display: block;
and add the class to show it.
– epascarello
Mar 7 at 14:18
You can implement a live search bar, as described here: w3schools.com/howto/howto_js_filter_lists.asp. Instead of hiding the ones you don't need, just show the one you want to see.
– Marten
Mar 7 at 14:18
it's more like, I like when you open the site, it's pretty much just a button (and search bar) and then it only shows one recipe and I must admit HTML and CSS, I'm beginning to get the hang off, but javascript, I get a little bit, but still pretty lost so when I read var input, filter, ul, li, a, i, txtValue; then it filters ul, li, a, and i?
– Nep Pedersen
Mar 7 at 14:36
add a comment |
other than you do not need an array, it is fine. Probably want to use"block"
instead of"inline-block"
or have another class that has.reciepe.show display: block;
and add the class to show it.
– epascarello
Mar 7 at 14:18
You can implement a live search bar, as described here: w3schools.com/howto/howto_js_filter_lists.asp. Instead of hiding the ones you don't need, just show the one you want to see.
– Marten
Mar 7 at 14:18
it's more like, I like when you open the site, it's pretty much just a button (and search bar) and then it only shows one recipe and I must admit HTML and CSS, I'm beginning to get the hang off, but javascript, I get a little bit, but still pretty lost so when I read var input, filter, ul, li, a, i, txtValue; then it filters ul, li, a, and i?
– Nep Pedersen
Mar 7 at 14:36
other than you do not need an array, it is fine. Probably want to use
"block"
instead of "inline-block"
or have another class that has .reciepe.show display: block;
and add the class to show it.– epascarello
Mar 7 at 14:18
other than you do not need an array, it is fine. Probably want to use
"block"
instead of "inline-block"
or have another class that has .reciepe.show display: block;
and add the class to show it.– epascarello
Mar 7 at 14:18
You can implement a live search bar, as described here: w3schools.com/howto/howto_js_filter_lists.asp. Instead of hiding the ones you don't need, just show the one you want to see.
– Marten
Mar 7 at 14:18
You can implement a live search bar, as described here: w3schools.com/howto/howto_js_filter_lists.asp. Instead of hiding the ones you don't need, just show the one you want to see.
– Marten
Mar 7 at 14:18
it's more like, I like when you open the site, it's pretty much just a button (and search bar) and then it only shows one recipe and I must admit HTML and CSS, I'm beginning to get the hang off, but javascript, I get a little bit, but still pretty lost so when I read var input, filter, ul, li, a, i, txtValue; then it filters ul, li, a, and i?
– Nep Pedersen
Mar 7 at 14:36
it's more like, I like when you open the site, it's pretty much just a button (and search bar) and then it only shows one recipe and I must admit HTML and CSS, I'm beginning to get the hang off, but javascript, I get a little bit, but still pretty lost so when I read var input, filter, ul, li, a, i, txtValue; then it filters ul, li, a, and i?
– Nep Pedersen
Mar 7 at 14:36
add a comment |
1 Answer
1
active
oldest
votes
Nep, I've prepared a working example. In case of further question, don't hesitate to ask.
I've grouped your code into functions, comment out the random method and do add a nav with input to search for recipes.
function getReceipes()
return document.getElementsByClassName('recipe');
function randomDiv()
var receipes = getReceipes();
return receipes[Math.floor(Math.random() * receipes.length)];
// randomDiv().style.display="inline-block";
document.getElementById('search').addEventListener('keyup', function(e)
var searchText = this.value;
Array.from(getReceipes()).forEach(function(recipe)
if (searchText.length === 0)
recipe.style.display = 'none';
else
var nameElement = recipe.getElementsByTagName('h2')[0];
if (nameElement && nameElement.innerText.indexOf(searchText) > -1)
recipe.style.display = 'inline-block';
else
recipe.style.display = 'none';
);
);
.recipe
display:none;
<nav>
<input id="search" type="text" placeholder="Type a name of recipe" />
</nav>
<main>
<div id="1" class="recipe">
<h2>first</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>
<div id="2" class="recipe">
<h2>second</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>
</main>
okay, this is really cool, thx man when I "run code snippet" it's just perfect, but when i run it on my site, it doesent come with any resluts, and I was thinking, I did change the part return document.getElementsByClassName, because I tanslated the class name, so it would make sense, what it's really called is 'opskrift', so I changed it to return document.getElementsByClassName('opskrift'); is there any other thing i would have to change? since it not working?
– Nep Pedersen
Mar 7 at 18:47
Make sure that the input is being found using id: search, also make sure that there is a h2 element inside the opskrift container.
– Nubzor
Mar 8 at 10:13
in the 'opskrift' container, the name is a h2 element, and the nav container? looks like this= <nav> <input id="search" type="text" placeholder="Type a name of recipe" /> </nav> is that the id:search you refered to?
– Nep Pedersen
Mar 8 at 10:18
okay I got to work, and it's just perfect, just 1 little thing is stille 'in the way', how to make it NOT case sensitive, when I search for ramen, I have to make a uppercase R, because thats how the name is written in the h2 container, and it's just not findeing it with a lower case r, so what to do........... and once agian, thx man,
– Nep Pedersen
Mar 8 at 10:48
To ignore case sensitivity in both ways you can replace var searchText = this.value; with var searchText = this.value.toLocaleLowerCase(); and nameElement.innerText.indexOf(searchText) with nameElement.innerText.toLocaleLowerCase().indexOf(searchText)
– Nubzor
Mar 8 at 12:35
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55045900%2fsimple-search-bar-that-shows-div%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Nep, I've prepared a working example. In case of further question, don't hesitate to ask.
I've grouped your code into functions, comment out the random method and do add a nav with input to search for recipes.
function getReceipes()
return document.getElementsByClassName('recipe');
function randomDiv()
var receipes = getReceipes();
return receipes[Math.floor(Math.random() * receipes.length)];
// randomDiv().style.display="inline-block";
document.getElementById('search').addEventListener('keyup', function(e)
var searchText = this.value;
Array.from(getReceipes()).forEach(function(recipe)
if (searchText.length === 0)
recipe.style.display = 'none';
else
var nameElement = recipe.getElementsByTagName('h2')[0];
if (nameElement && nameElement.innerText.indexOf(searchText) > -1)
recipe.style.display = 'inline-block';
else
recipe.style.display = 'none';
);
);
.recipe
display:none;
<nav>
<input id="search" type="text" placeholder="Type a name of recipe" />
</nav>
<main>
<div id="1" class="recipe">
<h2>first</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>
<div id="2" class="recipe">
<h2>second</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>
</main>
okay, this is really cool, thx man when I "run code snippet" it's just perfect, but when i run it on my site, it doesent come with any resluts, and I was thinking, I did change the part return document.getElementsByClassName, because I tanslated the class name, so it would make sense, what it's really called is 'opskrift', so I changed it to return document.getElementsByClassName('opskrift'); is there any other thing i would have to change? since it not working?
– Nep Pedersen
Mar 7 at 18:47
Make sure that the input is being found using id: search, also make sure that there is a h2 element inside the opskrift container.
– Nubzor
Mar 8 at 10:13
in the 'opskrift' container, the name is a h2 element, and the nav container? looks like this= <nav> <input id="search" type="text" placeholder="Type a name of recipe" /> </nav> is that the id:search you refered to?
– Nep Pedersen
Mar 8 at 10:18
okay I got to work, and it's just perfect, just 1 little thing is stille 'in the way', how to make it NOT case sensitive, when I search for ramen, I have to make a uppercase R, because thats how the name is written in the h2 container, and it's just not findeing it with a lower case r, so what to do........... and once agian, thx man,
– Nep Pedersen
Mar 8 at 10:48
To ignore case sensitivity in both ways you can replace var searchText = this.value; with var searchText = this.value.toLocaleLowerCase(); and nameElement.innerText.indexOf(searchText) with nameElement.innerText.toLocaleLowerCase().indexOf(searchText)
– Nubzor
Mar 8 at 12:35
|
show 1 more comment
Nep, I've prepared a working example. In case of further question, don't hesitate to ask.
I've grouped your code into functions, comment out the random method and do add a nav with input to search for recipes.
function getReceipes()
return document.getElementsByClassName('recipe');
function randomDiv()
var receipes = getReceipes();
return receipes[Math.floor(Math.random() * receipes.length)];
// randomDiv().style.display="inline-block";
document.getElementById('search').addEventListener('keyup', function(e)
var searchText = this.value;
Array.from(getReceipes()).forEach(function(recipe)
if (searchText.length === 0)
recipe.style.display = 'none';
else
var nameElement = recipe.getElementsByTagName('h2')[0];
if (nameElement && nameElement.innerText.indexOf(searchText) > -1)
recipe.style.display = 'inline-block';
else
recipe.style.display = 'none';
);
);
.recipe
display:none;
<nav>
<input id="search" type="text" placeholder="Type a name of recipe" />
</nav>
<main>
<div id="1" class="recipe">
<h2>first</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>
<div id="2" class="recipe">
<h2>second</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>
</main>
okay, this is really cool, thx man when I "run code snippet" it's just perfect, but when i run it on my site, it doesent come with any resluts, and I was thinking, I did change the part return document.getElementsByClassName, because I tanslated the class name, so it would make sense, what it's really called is 'opskrift', so I changed it to return document.getElementsByClassName('opskrift'); is there any other thing i would have to change? since it not working?
– Nep Pedersen
Mar 7 at 18:47
Make sure that the input is being found using id: search, also make sure that there is a h2 element inside the opskrift container.
– Nubzor
Mar 8 at 10:13
in the 'opskrift' container, the name is a h2 element, and the nav container? looks like this= <nav> <input id="search" type="text" placeholder="Type a name of recipe" /> </nav> is that the id:search you refered to?
– Nep Pedersen
Mar 8 at 10:18
okay I got to work, and it's just perfect, just 1 little thing is stille 'in the way', how to make it NOT case sensitive, when I search for ramen, I have to make a uppercase R, because thats how the name is written in the h2 container, and it's just not findeing it with a lower case r, so what to do........... and once agian, thx man,
– Nep Pedersen
Mar 8 at 10:48
To ignore case sensitivity in both ways you can replace var searchText = this.value; with var searchText = this.value.toLocaleLowerCase(); and nameElement.innerText.indexOf(searchText) with nameElement.innerText.toLocaleLowerCase().indexOf(searchText)
– Nubzor
Mar 8 at 12:35
|
show 1 more comment
Nep, I've prepared a working example. In case of further question, don't hesitate to ask.
I've grouped your code into functions, comment out the random method and do add a nav with input to search for recipes.
function getReceipes()
return document.getElementsByClassName('recipe');
function randomDiv()
var receipes = getReceipes();
return receipes[Math.floor(Math.random() * receipes.length)];
// randomDiv().style.display="inline-block";
document.getElementById('search').addEventListener('keyup', function(e)
var searchText = this.value;
Array.from(getReceipes()).forEach(function(recipe)
if (searchText.length === 0)
recipe.style.display = 'none';
else
var nameElement = recipe.getElementsByTagName('h2')[0];
if (nameElement && nameElement.innerText.indexOf(searchText) > -1)
recipe.style.display = 'inline-block';
else
recipe.style.display = 'none';
);
);
.recipe
display:none;
<nav>
<input id="search" type="text" placeholder="Type a name of recipe" />
</nav>
<main>
<div id="1" class="recipe">
<h2>first</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>
<div id="2" class="recipe">
<h2>second</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>
</main>
Nep, I've prepared a working example. In case of further question, don't hesitate to ask.
I've grouped your code into functions, comment out the random method and do add a nav with input to search for recipes.
function getReceipes()
return document.getElementsByClassName('recipe');
function randomDiv()
var receipes = getReceipes();
return receipes[Math.floor(Math.random() * receipes.length)];
// randomDiv().style.display="inline-block";
document.getElementById('search').addEventListener('keyup', function(e)
var searchText = this.value;
Array.from(getReceipes()).forEach(function(recipe)
if (searchText.length === 0)
recipe.style.display = 'none';
else
var nameElement = recipe.getElementsByTagName('h2')[0];
if (nameElement && nameElement.innerText.indexOf(searchText) > -1)
recipe.style.display = 'inline-block';
else
recipe.style.display = 'none';
);
);
.recipe
display:none;
<nav>
<input id="search" type="text" placeholder="Type a name of recipe" />
</nav>
<main>
<div id="1" class="recipe">
<h2>first</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>
<div id="2" class="recipe">
<h2>second</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>
</main>
function getReceipes()
return document.getElementsByClassName('recipe');
function randomDiv()
var receipes = getReceipes();
return receipes[Math.floor(Math.random() * receipes.length)];
// randomDiv().style.display="inline-block";
document.getElementById('search').addEventListener('keyup', function(e)
var searchText = this.value;
Array.from(getReceipes()).forEach(function(recipe)
if (searchText.length === 0)
recipe.style.display = 'none';
else
var nameElement = recipe.getElementsByTagName('h2')[0];
if (nameElement && nameElement.innerText.indexOf(searchText) > -1)
recipe.style.display = 'inline-block';
else
recipe.style.display = 'none';
);
);
.recipe
display:none;
<nav>
<input id="search" type="text" placeholder="Type a name of recipe" />
</nav>
<main>
<div id="1" class="recipe">
<h2>first</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>
<div id="2" class="recipe">
<h2>second</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>
</main>
function getReceipes()
return document.getElementsByClassName('recipe');
function randomDiv()
var receipes = getReceipes();
return receipes[Math.floor(Math.random() * receipes.length)];
// randomDiv().style.display="inline-block";
document.getElementById('search').addEventListener('keyup', function(e)
var searchText = this.value;
Array.from(getReceipes()).forEach(function(recipe)
if (searchText.length === 0)
recipe.style.display = 'none';
else
var nameElement = recipe.getElementsByTagName('h2')[0];
if (nameElement && nameElement.innerText.indexOf(searchText) > -1)
recipe.style.display = 'inline-block';
else
recipe.style.display = 'none';
);
);
.recipe
display:none;
<nav>
<input id="search" type="text" placeholder="Type a name of recipe" />
</nav>
<main>
<div id="1" class="recipe">
<h2>first</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>
<div id="2" class="recipe">
<h2>second</h2>
<h3>stuff I need</h3>
<ul>
<li>stuff</li>
</ul>
<h3>how to</h3>
<p>how to text</p>
<h1>time</h1>
</div>
</main>
edited Mar 7 at 16:49
Paolo
178112
178112
answered Mar 7 at 15:55
NubzorNubzor
1701114
1701114
okay, this is really cool, thx man when I "run code snippet" it's just perfect, but when i run it on my site, it doesent come with any resluts, and I was thinking, I did change the part return document.getElementsByClassName, because I tanslated the class name, so it would make sense, what it's really called is 'opskrift', so I changed it to return document.getElementsByClassName('opskrift'); is there any other thing i would have to change? since it not working?
– Nep Pedersen
Mar 7 at 18:47
Make sure that the input is being found using id: search, also make sure that there is a h2 element inside the opskrift container.
– Nubzor
Mar 8 at 10:13
in the 'opskrift' container, the name is a h2 element, and the nav container? looks like this= <nav> <input id="search" type="text" placeholder="Type a name of recipe" /> </nav> is that the id:search you refered to?
– Nep Pedersen
Mar 8 at 10:18
okay I got to work, and it's just perfect, just 1 little thing is stille 'in the way', how to make it NOT case sensitive, when I search for ramen, I have to make a uppercase R, because thats how the name is written in the h2 container, and it's just not findeing it with a lower case r, so what to do........... and once agian, thx man,
– Nep Pedersen
Mar 8 at 10:48
To ignore case sensitivity in both ways you can replace var searchText = this.value; with var searchText = this.value.toLocaleLowerCase(); and nameElement.innerText.indexOf(searchText) with nameElement.innerText.toLocaleLowerCase().indexOf(searchText)
– Nubzor
Mar 8 at 12:35
|
show 1 more comment
okay, this is really cool, thx man when I "run code snippet" it's just perfect, but when i run it on my site, it doesent come with any resluts, and I was thinking, I did change the part return document.getElementsByClassName, because I tanslated the class name, so it would make sense, what it's really called is 'opskrift', so I changed it to return document.getElementsByClassName('opskrift'); is there any other thing i would have to change? since it not working?
– Nep Pedersen
Mar 7 at 18:47
Make sure that the input is being found using id: search, also make sure that there is a h2 element inside the opskrift container.
– Nubzor
Mar 8 at 10:13
in the 'opskrift' container, the name is a h2 element, and the nav container? looks like this= <nav> <input id="search" type="text" placeholder="Type a name of recipe" /> </nav> is that the id:search you refered to?
– Nep Pedersen
Mar 8 at 10:18
okay I got to work, and it's just perfect, just 1 little thing is stille 'in the way', how to make it NOT case sensitive, when I search for ramen, I have to make a uppercase R, because thats how the name is written in the h2 container, and it's just not findeing it with a lower case r, so what to do........... and once agian, thx man,
– Nep Pedersen
Mar 8 at 10:48
To ignore case sensitivity in both ways you can replace var searchText = this.value; with var searchText = this.value.toLocaleLowerCase(); and nameElement.innerText.indexOf(searchText) with nameElement.innerText.toLocaleLowerCase().indexOf(searchText)
– Nubzor
Mar 8 at 12:35
okay, this is really cool, thx man when I "run code snippet" it's just perfect, but when i run it on my site, it doesent come with any resluts, and I was thinking, I did change the part return document.getElementsByClassName, because I tanslated the class name, so it would make sense, what it's really called is 'opskrift', so I changed it to return document.getElementsByClassName('opskrift'); is there any other thing i would have to change? since it not working?
– Nep Pedersen
Mar 7 at 18:47
okay, this is really cool, thx man when I "run code snippet" it's just perfect, but when i run it on my site, it doesent come with any resluts, and I was thinking, I did change the part return document.getElementsByClassName, because I tanslated the class name, so it would make sense, what it's really called is 'opskrift', so I changed it to return document.getElementsByClassName('opskrift'); is there any other thing i would have to change? since it not working?
– Nep Pedersen
Mar 7 at 18:47
Make sure that the input is being found using id: search, also make sure that there is a h2 element inside the opskrift container.
– Nubzor
Mar 8 at 10:13
Make sure that the input is being found using id: search, also make sure that there is a h2 element inside the opskrift container.
– Nubzor
Mar 8 at 10:13
in the 'opskrift' container, the name is a h2 element, and the nav container? looks like this= <nav> <input id="search" type="text" placeholder="Type a name of recipe" /> </nav> is that the id:search you refered to?
– Nep Pedersen
Mar 8 at 10:18
in the 'opskrift' container, the name is a h2 element, and the nav container? looks like this= <nav> <input id="search" type="text" placeholder="Type a name of recipe" /> </nav> is that the id:search you refered to?
– Nep Pedersen
Mar 8 at 10:18
okay I got to work, and it's just perfect, just 1 little thing is stille 'in the way', how to make it NOT case sensitive, when I search for ramen, I have to make a uppercase R, because thats how the name is written in the h2 container, and it's just not findeing it with a lower case r, so what to do........... and once agian, thx man,
– Nep Pedersen
Mar 8 at 10:48
okay I got to work, and it's just perfect, just 1 little thing is stille 'in the way', how to make it NOT case sensitive, when I search for ramen, I have to make a uppercase R, because thats how the name is written in the h2 container, and it's just not findeing it with a lower case r, so what to do........... and once agian, thx man,
– Nep Pedersen
Mar 8 at 10:48
To ignore case sensitivity in both ways you can replace var searchText = this.value; with var searchText = this.value.toLocaleLowerCase(); and nameElement.innerText.indexOf(searchText) with nameElement.innerText.toLocaleLowerCase().indexOf(searchText)
– Nubzor
Mar 8 at 12:35
To ignore case sensitivity in both ways you can replace var searchText = this.value; with var searchText = this.value.toLocaleLowerCase(); and nameElement.innerText.indexOf(searchText) with nameElement.innerText.toLocaleLowerCase().indexOf(searchText)
– Nubzor
Mar 8 at 12:35
|
show 1 more comment
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55045900%2fsimple-search-bar-that-shows-div%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
other than you do not need an array, it is fine. Probably want to use
"block"
instead of"inline-block"
or have another class that has.reciepe.show display: block;
and add the class to show it.– epascarello
Mar 7 at 14:18
You can implement a live search bar, as described here: w3schools.com/howto/howto_js_filter_lists.asp. Instead of hiding the ones you don't need, just show the one you want to see.
– Marten
Mar 7 at 14:18
it's more like, I like when you open the site, it's pretty much just a button (and search bar) and then it only shows one recipe and I must admit HTML and CSS, I'm beginning to get the hang off, but javascript, I get a little bit, but still pretty lost so when I read var input, filter, ul, li, a, i, txtValue; then it filters ul, li, a, and i?
– Nep Pedersen
Mar 7 at 14:36