根据搜索显示div

Question

I have a small problem with a script that I want to find and show different divs depending on a search. The original script is something I found and used for a contact list, and that I now want to configure to do something else. Original code (JSFiddle)

My edited code:

 $('.Fruit').hide(); $('#search').click(function() { $('.Fruit').hide(); var txt = $('#search-criteria').val(); $('.Fruit').each(function() { if ($(this).id.toUpperCase().indexOf(txt.toUpperCase()) != -1) { $(this).show(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <input type="text" id="search-criteria" /> <input type="button" id="search" value="search" /> <div class="Fruit" id="Apple"> <h3>Some text about apples</h3> </div> <div class="Fruit" id="Orange"> <h3>Some text about oranges</h3> </div> 

I don't know if you understand what I'm trying to achieve...? I have, in this case, two divs - Apple and Orange. By default both are hidden, but if I enter Apple for instance in the search field and push the search button, the div "Apple" will show, and if I instead search for "Orange" then obviously I want the "Orange" div to show. If I search for anything else nothing will show, as long as there's not a div with an id that matches the searchword.

So basically I'm trying to build a database of preloaded content that can be searched and shown on the fly without reloading the page.

The error is, as far as I can understand, when I try to address and compare the divs id with the searchword on row 6 in the JS. Does anyone know how to do this, and make this work? Or does anyone have another solution that can perform this task?

Answer 1

The issue is because jQuery objects do not have an id property. You need to use prop('id') or just this.id .

Also note that you can improve your logic by making the id attributes you match with lower case, then convert the input to lower case, then you can just use a normal selector, like this:

 $('#search').click(function() { var txt = $('#search-criteria').val(); if (txt) $('.fruit').hide().filter('#' + txt.toLowerCase()).show(); }); 

 .fruit { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <input type="text" id="search-criteria" /> <input type="button" id="search" value="search" /> <div class="fruit" id="apple"> <h3>Some text about apples</h3> </div> <div class="fruit" id="orange"> <h3>Some text about oranges</h3> </div>