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
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
Last Comment
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
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
Thank you
R
ASKER
Here it is with the class:
R
<!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>
R
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
R
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.
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.
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.
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.
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
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
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:
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
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");
}
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
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
Can you not give a blanket display:none (thinking of the empty search field).
Thanks
ASKER
Damn this overrides my actual search.. ok will need to work it out
R
R
ASKER
Ill open a new Q as this is getting rather commenty.. thank you
R
R
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();
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();
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
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
PHP
PHP is a widely-used server-side scripting language especially suited for web development, powering tens of millions of sites from Facebook to personal WordPress blogs. PHP is often paired with the MySQL relational database, but includes support for most other mainstream databases. By utilizing different Server APIs, PHP can work on many different web servers as a server-side scripting language.
125K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
ASKER
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