Response title
This is preview!
Move this topic
Searching for multiple items from a list in a second list
in Using jQuery
•
8 years ago
I have the following code...
- if ($("#filter_chemistry").val() != "") {
- $("td.polymerTypel").not(":contains('" + $("#filter_chemistry").val().toLowerCase() + "')").parent().hide();
- }
Where #filter_chemistry is a form text field, and the td's
with the polymerTypel class will contain a list of items similar
to st,ac,bde,va for example.
If I enter "ac" into my text box, all table rows NOT
containing ac in the list will be correctly hidden, all good so far.
What I want is to be able to enter ac,va into the text box and have
both of these items required, but not in any specific order or location.
I assume some sort of
$("#filter_chemistry").val().split(",") will be
required to create an array but it is beyond me. Can anyone help please?
Thanks.
1
Replies(10)
- $(function(){
- $('#filter_chemistry').on('keyup', function(){
- var search = $(this).val();
- search = search.split(',');
- $('td.polymerTypel').each(function(){
- var match = $.inArray($(this).text(), search) >= 0 ? 1:0;
- $(this).parent().toggle(!!match);
- });
- });
- });
See the demo here http://jsfiddle.net/13s1gfja/
Leave a comment on Sµßhrånil∂'s reply
I have done a little update to your demo
at http://jsfiddle.net/13s1gfja/2/ to make the td's contain lists
and the code doesn't work any more. Using the example table in the
fiddle, if you enter "st" into the text box I need the two
rows that just contain "st" to remain (as they do) but also
the three containing "st" mixed with other things.
Also, I'm not sure I can use the toggle() method as this filter
is one of many, I am using $("tr:hidden").show(); at the top
of my function and then going through calling .hide() on each row that
doesn't match one of the filters but I don't seem to be able
to adapt that to your code. I really am not great with JS :)
Leave a comment on dunwoodjames's reply
Here its is http://jsfiddle.net/13s1gfja/4/
- $(function(){
- $('#filter_chemistry').on('keyup', function(){
- var search = $(this).val().toLowerCase();
- if(search == ''){
- $('td.polymerTypel').parent().show();
- return;
- }
- search = search.split(',');
- $('td.polymerTypel').each(function(){
- var texts = $(this).text();
- texts = texts.split(',');
- var match = search.some(function(v) { return texts.indexOf(v) != -1; });
- $(this).parent().toggle(!!match);
- });
- });
- });
Leave a comment on Sµßhrånil∂'s reply
We are really close now and I am sorry to keep imposing on you like
this, you are being most helpful.
The filers need to be AND instead of OR, so if you enter
"st,ac" you should only get 2 results back, the
"ac,st" and the "st,ac" but none of the others.
Also, because of the way this is one filter in a chain of others,
each one hiding results that don't match, this will potentially
display previously hidden rows so it needs to be changed from
.toggle() to .hide() somehow.
The flow is...
- Show all rows
- hide any not matching filter 1
- hide any not matching filter 2
- ...
- hide any not matching filter 9
So you end up with just the rows that match all the filters,
using the toggle method on this one filter will break this.
Leave a comment on dunwoodjames's reply
http://jsfiddle.net/13s1gfja/5/
Changed some to every
var match = search.some (function(v) { return texts.indexOf(v) != -1; });
to
var match = search.every (function(v) { return texts.indexOf(v) != -1; });
Changed some to every
var match = search.some (function(v) { return texts.indexOf(v) != -1; });
to
var match = search.every (function(v) { return texts.indexOf(v) != -1; });
Leave a comment on Sµßhrånil∂'s reply
That is working on the fiddle but I can't get is transferred to fit
in with my existing code. I have the following...
- function doFilters() {
- $("tr:hidden").show();
- if ($("#filter_chemistry").val() != "") {
- var chemFilter = $("#filter_chemistry").val().toLowerCase().split(',');
- $("td.polymerTypel").each(function(){
- var texts = $("td.polymerTypel").text().split(',');
- var match = search.every(function(v) { return texts.indexOf(v) != -1; });
- $(this).parent().toggle(!!match);
- });
- }
- if (($("#filter_tg_min").val() != "") && ($("#filter_tg_max").val() != "")) {
- var tgMin = parseInt($("#filter_tg_min").val());
- var tgMax = parseInt($("#filter_tg_max").val());
- $("td.tg").not(function () {
- return parseInt($(this).text()) >= tgMin && parseInt($(this).text()) <= tgMax;
- }).parent().hide();
- }
- if ($("#filter_source").val() != "") {
- $("td.source").not(":contains('" + $("#filter_source").val() + "')").parent().hide();
- }
-
- }
-
- $(".filter").change(function () { doFilters(); });
There are several more filters than this but you get the idea. All
of the text boxes have a class of "filter" on them. to
trigger that last line.
Leave a comment on dunwoodjames's reply
Can't predict anything without seeing it in play. Share a link to your page or create a fiddle with exactly same html you have
Leave a comment on Sµßhrånil∂'s reply
Sorry, had a busy day.
I have created a fiddle here http://jsfiddle.net/13s1gfja/9/ that
shows some of it. I have had to rewrite it and remove a lot of data as
it is internal and some of it is sensitive. The full table has about 4
more filters, half a dozen more columns and over 200 rows, but this
will give you the idea I think.
The filter we have been working on (or rather you have, thanks
again) is the first one, the chemistry filter.
Once I have this working internally I will be copying the same idea
to our public site but without the sensitive data included.
Leave a comment on dunwoodjames's reply
You have errors in your code which you should debug and fix.
var match = search.every(function(v) { return texts.indexOf(v) != -1; });
will be
var match = chemFilter.every(function(v) { return texts.indexOf(v) !=-1; });
and
var texts = $("td.polymerTypel").text().split(',');
will be
var texts = $(this).text().split(',');
http://jsfiddle.net/13s1gfja/10/
var match = search.every(function(v) { return texts.indexOf(v) != -1; });
will be
var match = chemFilter.every(function(v) { return texts.indexOf(v) !=-1; });
and
var texts = $("td.polymerTypel").text().split(',');
will be
var texts = $(this).text().split(',');
http://jsfiddle.net/13s1gfja/10/
Leave a comment on Sµßhrånil∂'s reply
Thank you, thank you, thank you, thank you, thank you.
That is it all working now, your help was invaluable.
Leave a comment on dunwoodjames's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to dunwoodjames's question
Statistics
- 10 Replies
- 2172 Views
- 0 Followers