troubleshooting Question
JQuery help for TEXT field filtering a group of DIVs
asked on
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
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
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.
Our community of experts have been thoroughly vetted for their expertise and industry experience.
The Fellow title is reserved for select members who demonstrate sustained contributions, industry leadership, and outstanding performance. We will announce the experts being inducted into the Experts Exchange Fellowship during the annual Expert Awards, but unlike other awards, Fellow is a lifelong status. This title may not be given every year if there are no obvious candidates.
The Most Valuable Expert award recognizes technology experts who passionately share their knowledge with the community, demonstrate the core values of this platform, and go the extra mile in all aspects of their contributions. This award is based off of nominations by EE users and experts. Multiple MVEs may be awarded each year.