2

I am trying to filter a list of restaurant's based on their influences. I would like to use sliders instead of generic categories like Indian/Asian/Mexican/European cuisine.

A restaurant could be

[{restaurant: 
    {name: 'The Apollon',
    thumb: 'apollon.jpg',
    type: 
        [{spicy: 5, type_id: 1}
        {garlic:3, type_id:2}
        {expensive:10, type_id:3}]}
}]

I'd then use a generic JQuery UI slider and pass the value from each slider to a hidden element.

Here is where I am utterly stuck though. I can get it to work on one slider by utilizing classes instead of JSON( .nospice .somespice .spicy ) and doing an if (value >= 7) {$('.spicy').show();}, but I'm not sure how I'd go about doing more advanced queries (if x = >=7 AND y = >=3 AND z = >=5)

Does someone want to nudge me in the right direction here? What do I need to read up on. If I am going about this in a fantasticly wrong way, please do tell.

jsfiddle: http://jsfiddle.net/techii/9e2cJ/

techii
  • 113
  • 1
  • 9
  • Show your relevant HTML. Show us a live (minimal/[sscce](http://sscce.org/)) demo that reproduces what you've got so far, with a [JS Fiddle demo](http://jsfiddle.net/). – David Thomas Feb 03 '13 at 11:15
  • What I have thus far is an extremely convoluted mess, but I will produce a JSFiddle demo and update the OP. – techii Feb 03 '13 at 11:16
  • Great idea, I assume you are using this slider: http://jqueryui.com/slider/#colorpicker Then you have a slider for each category like spicy, garlic, price, ambiance ... If that's the case than I think Matt gave you what you need using .each and toggle. – HMR Feb 03 '13 at 11:23
  • http://jsfiddle.net/techii/9e2cJ/ – techii Feb 03 '13 at 11:28

1 Answers1

2

jQuery has a .filter method. I would also recommend that you store the restaurant object with the div using .data to store the restaurant name and type with its div:

$(".restaurants > div").filter(function(){
   var info = $(this).data("info");
   // Some code to extract things like spicyness, expensiveness
   // Also some code to get the slider values...
   if (spicynessSliderValue <= spicyness && expensivenessSliderValue <= expensiveness)
   {
       return true;
   }
}).show();

In your case I would suggest using $.each however:

$(".restaurants > div").each(function(){
   ...
   var isMatch = picynessSliderValue <= spicyness && expensivenessSliderValue <= expensiveness;
   $(this).toggle(isMatch); // like .show or .hide, but takes a boolean
})
Matt Zeunert
  • 16,075
  • 6
  • 52
  • 78
  • Hmm, fantastic. I'm sure this could work. Im not 100% sure if i'll be able to implement it though due to my lack of skill/experience, but I'll give it a shot! Thank you. Leaving it open for 10-15 more minutes if anyone wants to contribute before marking this answered. – techii Feb 03 '13 at 11:31
  • How would I actually go about getting the values from, and pushing them to four distinct named variables given that these sliders are anonymous. `$('.sliders > div').each(function(){$ (this).slider({*...*}];);` – techii Feb 04 '13 at 07:00
  • @techii Either give them an id or figure out which slider it is based on their order. This is the jQuery.each signature: `callback(indexInArray, valueOfElement)`. So you can say `if (indexInArray == 0){spicyness = $(this).val()}` etc. – Matt Zeunert Feb 04 '13 at 09:16
  • Cheers Matt, I got it working. I have another little problem with your code though. The isMatch var itself. I've set everything up, and now it's filtering like it should. Problem is: On initialization all values filter correctly, but as soon as i'm moving anything at all it will default to hide everything until _all_ sliders have been moved. How do I prevent this behaviour? If you'd like I can post this as another question instead of a comment.. – techii Feb 05 '13 at 13:13
  • @techii Posting that as a separate question is probably a good idea. Without the current code I don't have an idea why you experience this behavior. – Matt Zeunert Feb 05 '13 at 13:36