0

I am trying make a map that filters markers based on certain parameters. initially I have 2 dropdown filter and one input filter. the input filter numbers only. my Array looks like :

['Belmont', 42.4135648, -83.1775028, 'A', '48227, 48235, 48219, 48223', 'Female', 'veteran'],

now I would like to simplify the work by combining my parameters all together, my new array will look similar to below: 

['Belmont', 42.4135648, -83.1775028, 'A', '48227, 48235, 48219, 48223 , Female ,veteran'],

I get all these filters to work separate, example as below.

https://jsfiddle.net/gf9o3k0q/2/

so I have my code: 

if (
      (gender == "All" || marker.gender == gender) &&
      (people == "All" || marker.people == people) &&
      (serviceSearchTerm !== null && serviceSearchRegx.test(marker.service))
    ) visible = true;

change to only: 

if (

      (serviceSearchTerm !== null && serviceSearchRegx.test(marker.service))
    ) visible = true;

nothing shows after my type in any of the values. I would like users to only enter one the values in that parameter. such as they only type in Female, or Veteran, or 48337 for that point to show.

any help would be appreciated

evan
  • 5,443
  • 2
  • 11
  • 20
Maggster
  • 51
  • 6
  • Your jsfiddle appears to work without problem. The markers are visible based on your selected filters. Can you please clarify what you are trying to change, and the end result you're expecting instead so that we can better understand the issue? – evan Aug 19 '19 at 14:11
  • hi, thank you for your reply. I would actually like to combine all three filters as one input filter . I am trying to simplify my array. So originally I have an array in a format similar to [‘a’, ‘b’,’c’] and I use three separate filters for these. Now I would like to have my array formatted as [‘a, b, c’] and have just one input array. But because my array values contain number and text at the same time, I am not sure I can use same code that I am using currently. Let me know if it makes sense. Thank you!! – Maggster Aug 20 '19 at 15:19
  • Thanks for the clarification, so you mean you want a single dropdown list of all filters and only be able to filter markers by 1 filter selection? Note that the zip code input field cannot be placed within the – evan Aug 20 '19 at 16:15
  • Hi evan. thank you so much for your reply. I somehow manage to fix the problem, I have reduced all of my filters down to just one input filter. please see https://jsfiddle.net/maiiiii/Lodtumcs/8/ for example. Since I have one parameter that contains both text(upper and lowercase) and number, I would like to make the filter able to recognize both upper and lowercase. For example, if I type in 'Female' in the filter, the point with value '48227, 48235, 48219, 48223, Female, veteran' shows. but not when I type in 'female'. Should I convert my values to text first??? – Maggster Aug 21 '19 at 04:32
  • 1
    Heya, there's no need, plus your zip codes are already strings. You can just make case insensitive string comparison. See this jsfiddle: https://jsfiddle.net/adgLr4ot/ Type either "female" or "Female" or "FEMALE". All will work. :) – evan Aug 21 '19 at 06:20
  • 1
    Note that I used `document.getElementById("zipcode_filter").value.toUpperCase();` and `marker.service.toUpperCase()`. If this answers your question I'll go ahead and post this as my answer. – evan Aug 21 '19 at 06:22
  • thank you so much for your help evan. I am still trying to learn. So how I see the logic works here is that my array values are converted to uppercase as well as the values that I enter in my input filter? is that how that recognize the values?? yes, this solve my problem!! – Maggster Aug 22 '19 at 13:54
  • Yes you're correct, by converting both to uppercase strings, there is no longer a difference between "Female" and "female". They're both "FEMALE" hence the comparison === equals true so the filters are able to work regardless of whether the user has typed "female" or "Female" or "FEMALE" into the input field. Glad to hear it solved your issue, I'll go ahead and post this as a complete answer then. :) – evan Aug 22 '19 at 15:12

1 Answers1

0

The actual issue explained in how do I filter parameter with text and number in Google Map api can be easily solved by making a case insensitive string comparison.

Check out this fiddle: http://jsfiddle.net/adgLr4ot

Type either "female" or "Female" or "FEMALE". All will work, because toUpperCase() makes both document.getElementById("zipcode_filter").value and marker.service uppercase values that are deemed equal. Hence the markers can be filtered regardless of user's input case.

See related SO question to learn more: How to do case insensitive string comparison?

Keep up the good work and your learning journey!

evan
  • 5,443
  • 2
  • 11
  • 20