troubleshooting Question

JQuery help for TEXT field filtering a group of DIVs

Avatar of ROM
ROMFlag for United Kingdom of Great Britain and Northern Ireland asked on
CSSHTMLPHPjQuery
14 Comments1 Solution14 ViewsLast Modified:
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
Join our community to see this answer!
Unlock 1 Answer and 14 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 14 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros