asked on

JQuery help for TEXT field filtering a group of DIVs

Hi Everyone,

Been wrestling with this today. Yes I can get it to work on a html table with tr rows etc...

BUT.. this does not meet my need.

I have a column (DIV) acting like a wrapper. They I have several DIVs underneath like EMPLOYEE CARDS... Each DIV an employee card. Within each DIV it has the employee name. So I can make this within H7 etc... for ease.

So I want an input field to filter the DIVS being displayed within the WRAPPER on every keyup event on the text field.

So

<input type="text" id="searchname">
<div id="wrapper">
<div id="1">Francis Smith</div>
<div id="2">Frank Doogle</div>
<div id="3">Alan Smith</div>
<div id="4">Diane Smith</div>
<div id="5">Francis Cotton</div>
</div>

I have put a listener in to listen for the keyup events of the text field that is all fine.

But then I assume I need to load into an array and then loop through checking the text value with the html within the divs... maybe put the text in a h7 and then specify display:none where needed.
I got this working on a html table.. but I need to do this with the entire DIVs i.e. the employee cards.

Please let me know and drop some code... I clearly am missing the beat here... and happy to go with whatever approach works.. I just advised on that type of criteria for the solution as it seems to make logical sense.

Conclusion:

Text field... matches text within a group of separate DIVs (Cards) and as you type the DIVs that do not match disappear therefore reducing the DIVs within the wrapper.

Must work with DIVs as I have a whole drag and drop UI going on. I am happy to insert more tags like H7 forthe search match etc... Also DO NOT want to reload the page.. hence doing it in this way.... just let me know.

Many thanks in advance.

R

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ROM

ASKER

This is excellent and the functionality I was after.. just for some reason had a block on transposing to DIVs.

I do have an issue with it which that it is ONLY displaying that part of the DIV and not the entire div.

So in effect I have an employee card

Francis Smith
14/06/1973
HR
Grade C

When I do the search the DIVs become super simple and return just a single line of

Francis Smith.

So how can I change this code to display the entire DIV as originally displayed from <div> to </div> and not just the text matching element?

Nearly there.. excellent thank you

R

ROM

ASKER

The problem I guess will be born out of the use of internal DIVs within this DIV.. So I guess if we combine with the class this should be fine..

Thank you

R

ROM

ASKER

Here it is with the class:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
  $(function(){
   
   
    $(document).ready(function(){
  $("#searchname").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#wrapper .empcard").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
   
   
   
  });
  </script>
</head>
<body>


 
  <input type="text" id="searchname" value="">
<div id="wrapper">
   <div id="1" class="empcard"><div>Francis Smith</div>
            <div>15/09/1963</div>
            <div>HR</div></div>
   <div id="2" class="empcard">Frank Doogle</div>
   <div id="3" class="empcard">Alan Smith</div>
   <div id="4" class="empcard"><div>Diane Smith</div>
                        <div>IT</div></div>
   <div id="5" class="empcard">Francis Cotton</div>
</div>


</body>
</html>

Open in new window

Super thanks... that was it.

R

ROM

ASKER

Also refer to my post above showing you how to apply a class and therefore maintaining the entire card for people coming across this post for an answer. Thanks Scott.. you got it bob on.

R

Alicia St Rose

Hi Romolo!

I wanted to point out something you said in the original post about h7. h7 doesn't exist. And the h1, h2, h3, h4, h5, and h6 tags have specific functions. They help organized the content into over arching topic, sub topics and further sub topics. This helps people who rely on Screen readers understand the structure of your content. And, of course, using them properly helps with your SEO.

I found this helpful diagram from proximacy.sg:
https://www.proximacy.sg/wp-content/uploads/2019/05/h1-h3.gif

And here is some in-depth info regarding headings:
https://www.w3.org/WAI/tutorials/page-structure/headings/

Providing the accurate heading structure on your site is one of the most important things you can do to make it more Accessible. Never misuse a heading for paragraphs or other elements because you like the font size, color or style. If you need to adjust fonts in that way, use CSS and spans to style the fonts.

Scott Fell

I just helped somebody else with something very similar, though with tables. test.html

Don't pay attention to the ajax requests on that file, you can still run that page as a plain HTML. You will see there is a functionto reorder once you move something.

If you have div#1, div#2, div#3... ...div#14 and you want the id's to reflect the order, that test.html will help guide on how to do that as well as display the order ranking. Also, if you have child div's, it will be similar to the table with child td's. Maybe that sample will help. Just open another question if needed.

ROM

ASKER

Hi both.

Yes I was just advising that I could do this for a content change but I appreciate lack of accuracy makes it harder for the people on the other side to truly understand.

I have this now working as originally desired.

However I have realised one thing.... The users advise that they wish to use this facility with some 100+ DIVs to search through. Now I have this working marvelously with just 10x DIVs.

Please point me to a new question if so....

How can I restrict the number of cards that are loaded to let's say 15 (using a display:none or something) and then upon searching only show the TOP 15 cards (again display:none I am assuming here)?

It works great... just too much data VISUALLY on the screen.

I am using the code above almost exactly so please comment on changing that one and I can certainly shoehorn that in to my real development.

Thank you

R

ROM

ASKER

I have got a rough working model with a loop after the input on the search field.

Will keep working on this. Possibly call this on page load as well I guess:

   if (!$(this).val()){
         console.log("FIELD EMPTY");
             var searchdivs = document.getElementsByClassName("empcard");
            
            for(var i = 0; i < searchdivs.length ;i++)
            {
               searchdivs[i].style.display = "none";
            }
   }
   else
   {
         console.log("stuff in there");
   }

Open in new window

So I will just adapt this now to display none on 16 and above.

But if there is a better way... someone please say

Many thanks in advance

R

ROM

ASKER

If you have an entire class that you would like to hide.. MUST you interate through?

Can you not give a blanket display:none (thinking of the empty search field).

Thanks

ROM

ASKER

Damn this overrides my actual search.. ok will need to work it out

R

ROM

ASKER

Ill open a new Q as this is getting rather commenty.. thank you

R

Scott Fell

That sounds good.

Look in my example file I last posted. There is a sort function. You can adopt that and just use the index. Then test if the index is greater than a selected number. If it is hide();

ROM

ASKER

I did Scott but I cannot work out the bit that is relevant to me.

Please comment on this new question so I can award as this is a PART 2 to the original remit to be fair to you.

https://www.experts-exchange.com/questions/29219040/JQuery-I-have-a-filtered-list-but-only-want-to-show-first-3-matches.html#questionAdd

Thanks

R