eloquentstudio / filter.js Goto Github PK

Hi!

There is a addRecords method which is nice.
A removeRecords would be fine too. I tried to delete manually item in records but that's not enough.
I had to removed element $("div #fjs_xx") associated with these records. Otherwise adding new records, restore previous deleted ones...
But it is still not enough. When I call addRecords, each new item is filtered (added to DOM but display:none) until the initial number of item is reached.

Maybe I'll find a workaround. But it definitively needs a cleaner API method.

Is there currently a way to display a message if the filter returns no results? So instead of a blank page, we can show "No results found" or other such message.

live() was removed starting from jQuery 1.9 (http://api.jquery.com/live/). You should replace it with .on.

First of all your plugin is awesome.

I am working with your "Filter with google map" example and it works fine but I want to stream data instead of providing json in the same page. I modify your script a bit and add:
/_below fJS = filterInit();_******/

fJS.addData(data);

/_inside "var settings" at the end_******/
streaming: {
data_url: 'mydata.json',
}

/_before the end of "function filterInit()"_*****/
return FilterJS(data, "#results ul", view, settings);

but in console it says: "Uncaught ReferenceError: data is not defined";

Can you please help me to resolve this issue.

There is addCriteria and removeCriteria method.
Is there a way to access to added criterias in order to check if a criteria is already set ?

Hello guys and thank you for the hard work.

I'm just wondering, how is this differente from underscore,js's own filter function?

Hello mate!

Spent a bit of time today configuring your filter.js to work with a list of WordPress posts and ran into an obscure error. Seems if you've only got one set of checkboxes as filter_criteria and the and_filter_on flag set to false (or ignored entirely), you eventually cause a javascript error once all your checkboxes are unchecked.

To replicate the error:

• Comment out lines 32 and 36 in simple_filter.js
• Open simple_filter.html in a browser
• Uncheck both of the checkboxes.

Length property is undefined because the 'result' is never initiated.

Anyway, not too important, but thought you should know.

When playing with the stream-demo I discovered multiple (in fact six) occurences of the same/every item? Is there a way to prevent that? I assume it creates an item for every filter-critaria I'd like to use

This looks like a brilliant library, however I'm new to templating JSON and wondered whether it is possible to apply a filter but instead of only rendering the results it would be possible to render all items but apply a different template to those which are results and those that are 'discarded'

Essentially I want to generate a grid of elements based on the JSON, then when filtering make those which are no longer available at 50% opacity. Is there a way to do this, or am I completely misunderstanding the way this works? :-)

Any help or pointers would be massively appreciated.

Hi,

Much enjoy both the filter.js and the StreamTable.js plugin and it seems they share some codebase. If i would summarise the difference between the 2 is that filter.js is about having all of the data in the dom (and hiding what is not applicable because of the filter and search) and StreamTable.js is about having only a limited amount of dom elements (per_page option) per page. Currently it seems that StreamTable does not have support for filtering like filter.js and filter.js has no ability to paginate. Do you have any plans in having these features for both of them? If so it can be an opportunity to merge them and i would be happy to help with that.

The reason for asking this is because we have a product here which would use filter.js but it has big issues (in ie) when dealing with lots of data (+2500). The StreamTable approach seems to work better for larger data but then we loose the ability to filter. We where thinking of either:

• adding paging support to filter.js
• adding filter support to StreamTable
• go with a different rendering approach like buffered scrolling (http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/buffer-grid.html) where you constantly redraw a certain set of elements (kind like StreamTable but then in a scrolling matter instead of manual paginating).

We would be very interested in your opinion since you are the original creator. And if you think any of the ideas make sense and you don't have to much time for it i could send some pull requests and ask your feedback.

Thnx for the feedback

Johan

Is there a way to pass dynamic array key to the filter.

Hi, I know this is fairly simple but I haven't been able to find it in the code. Where is the code that sets the number of results per row? For instance I want to change it from 3 to 4. Thanks for your help.

I have many complex objects (about 5000) and want to have ability to filter them on page.
But i don't want to trigger instant search after enter every symbol and choosing every search criteria.
I want to bind filter() only to search button click event.

There is little documentation on the templating system you use in v2. How do I render the result of a function to the template?

Can i search text for only a particular key, rather than entire json data set

When I don't include filter_criteria, I get this error. All I want is the dynamic search functionality -- no checkboxes or other filters needed. What do you suggest?

I was needing a way to click a date and show all records that had a date that was above and below the clicked date.

I added a filter type to the filter.js code that is working well and hoping it might help someone else or it could be incorporated into the code!

There is also likely a cleaner way tow rite this code, but this was the best I could come up with.

Below is the filter criteria, using a new type called between:

link_between_filter: ['#link_between_filter .EVENT.change .SELECT.:input .TYPE.between', 'between_date_sort']

For the above to work there needs to be a json object of a date range, example: between_date_sort ="start_date-end_date" - The date being in milliseconds.

Now I had to add some code to the filter.js (line 199), this is adding a new filter if statement:

//If range is between use this code
}else if (filter_type == 'between') {

                        var range = category.split('-');

                        cat = jQuery.map(base.settings.object_map[filter_name],
                          function(n, v) {
                         //This below splits the json into two dates: start_date - end_date
                          var between = v.split('-');
                          //if date-value is -between, filter results.
                          if(range[1] == 'between'){
                               if (Number(between[0]) <= range[0] && Number(between[1]) >= range[0]){
                                return base.settings.object_map[filter_name][v];
                              }
                       //if not, reset and show all results
                          }else{
                              if (Number(between[0]) >= 0 && Number(between[1]) <= Infinity){
                                return base.settings.object_map[filter_name][v];
                              }
                           };
                          });


                }

To call the function I am using data-value='date-between' (again, date in milliseconds) To reset the value I am using data-value='0-above' .

Geet Jacobs

I have added multi word search instead of string search.
you may replace this ->>

if ($ele.text().toUpperCase().indexOf(val) >= 0) return id;

with this ->>

    var match = true, search_input = val.split(/\s+/);
    for (var _i = 0, _len = search_input.length; _i < _len; _i++) {
        match && (match = $ele.text().toUpperCase().indexOf(search_input[_i]) >= 0);
    }
    if (match === true) return id;

the code has been taken from http://rmm5t.github.io/jquery-sieve/

I would like to attach images, is there some way of doing this using addData or JSON?

I have tried using HTML commands like , and also tried to encode them. But within the result boxes, it prints out the HTML instead of parsing it correctly.

I configured search_in option in my file, like this:
search: {input: '#searchbox', search_in: '.runtime'}
The runtime field value is number, also the data has other fields, such as name, rating...
but still show some result when i input some letters in search input.

I'm trying to render nested json data with below code, but nothing shows.

Klasse

<%= grade.name %>

The json looks like this

"grade": [
{
"id": 2,
"name": "2. Klasse",
"language": 1
},
{
"id": 3,
"name": "3. Klasse",
"language": 1
}
]

If I remove the .name the output is

Any ideas?!

I'm not sure if it's the structure of my JSON or what but out-of-the-box the filtering / searching isn't working with v2.0

var FJS = FilterJS(JSON.parse( lw_post_data), '#resultsList', {
    template: '#media__view',
    search: {ele: '#filterSearch'}
  });

  FJS.addCriteria({
    field: 'taxonomy_business_location.slug',
    ele: '.js__filter-location',
    selector: 'select'
  });

  FJS.addCriteria({
    field: 'taxonomy_business_type.slug',
    ele: '.js__filter-type',
    selector: 'select'
  });

Here is a fiddle: http://jsfiddle.net/craigmdennis/ntmqtmod/

What happened to the custom filter types? I used to have:

filter_types: {
    any: function( current_value, option ){
      if ( current_value === '') { return true; }
      else { return current_value === option; }
    }
}

but I'm not sure if this still works in v2.

Hey mate,

So I'm working on a web project that depends on your filter.js, and so far I've been downloading it and including it manually in a few WordPress plugins that I'm coding.

I tried linking it as a raw.githubusercontent file but Chrome had a fit, and cloning the repository every time is probably not a good way to stay current. A Bower version of filter.js would be absolutely perfect, if you had the time. Or I could go ahead and do it for you, if you'd rather. I mean, technically you don't have to agree to either, but I would very much appreciate it.

I downloaded your example, unzipped the files and ran and immediately received this error in Chrome.

XMLHttpRequest cannot load file:///C:/filter.js-master/examples/data/top_movies_data.json?offset=250&limit=10&q=. Origin null is not allowed by Access-Control-Allow-Origin.

Hi,
First, I'd like to thank you for this great script I just discovered.
I was wondering if there was a simple way to hide all the items by default when you only have an Instant Search filter. I would like the items to show only when the user types its request in the input.
Thanks very much!
Maxime

Jiren,
Thank you so much for adding the Google Maps to the filtering. I LOVE the hover effect on the map--hadn't even thought of that. I almost have it where I need it, but am in a bit over my head to finish it up. Would you mind taking a look at my code? What's the best way to post? On github or for via email?

Thanks,
Catherine

Hi Jiren,

I moved my question here:

I'm facing one scenario where I must show all the results from the beginning, but keep the checkboxes unchecked and no "View All" checkbox at all, or better keep the "view all" as optional.

So, when the user starts checking the checkboxes the filter system starts filtering.
-This will let Users to pick immediately the elements they want to see.

When the user unchecks the checkboxes we show all the results again. I'm attaching one visual comp.

With filter.js all the checkboxes are checked from the beginning, thinking from the user side it is possible that users have to uncheck all the checkboxes to finally have checked only the checkbox of their interest in case they missed unchecking the "view all" checkbox.

Is there a correct way to implement this scenario?

Thank you so much,

Hi,

It would be brilliant if each filter could be added as a url segment so that someone could visit a page with this on, apply some filters and be able to bookmark that so that when they hit that bookmark the page loads with the filters already in place.

Thanks :)

John

Hi,

I have a filter setup similar to your demo (http://jiren.github.io/filter.js/filterjs.html) allowing users to filter by category. The difference with mine is that I'm using links rather than checkboxes.

I was looking for a way to by default have some categories selected and some not. So again using your demo, when the page is loaded only "Arts and crafts" and "Family" may be initially filtered and the others would be unchecked.

At the moment I'm using the after_init callback to trigger a change event which works but it's double the effort. I was wondering whether this is achievable during init instead?

Not really an issue, but a suggestion of new feature. I guess it takes the order from the json data provided. But it would be really nice if you were able to change sorting conditions. i.e. via a select input change sorting between category names and price, or any other data provided by the json string.

I can’t achieve filtering with a multiple select. The filtering callback returns no object.

It works fine with a simple one with :
FJS.addCriteria({field: ‘myField’, ele: ‘#myselect’, selector: ‘select’ })
It works fine with checkbox instead of multiple select.

Is this a limitation or am I missing something?

in master branch (not 2.0 which I do not test)

Tested on IE tabs in Chrome

When streaming, you select an external JSON file as the data source. If all the data is the the external file, what do you pass to the FilterJS function?

Is it possible to stream from a JSON object that is already on the page?

Your example shows return FilterJS(data, "#movies", view, options); but data is never defined as far as I can see...

I'm a little confused.

What do you think ? Is that a better idea ?

II'm happy to contribute if the response is good :)

Thank you for all of your hard work. I am having an issue setting this up with selects.

I have no problem getting it to work with checkboxes but I am trying to filter based on two dropdowns (one or the other.)

In examples I see how to dynamically generate values and bind (which don't quite understand) is it possible to have static dropdowns?

Hi,

You have an example in the documentation of how to filter using a link by using hidden inputs. In the example clicking the link filters the items and then you have a clear link to clear the filter.

Is there anyway to use the link as a toggle instead? So clicking the link once would filter the items, clicking it again would "unfilter".

Firstly, thanks for putting the working in and creating this great filter.
I've made some adjustments to the code to suit what I need but there's one issue that I can't figure out.
Is there a way to make the filter_criteria dynamic based upon a filter selection?
For instance, if I have 2 radiobox options and the first option is selected then I want all 6 filter_criteria to be used. If the second option is selected then I want only the first 3 filter criteria to be used.
So for the first option I would use:

filter_criteria:
    {
    rating:  ['#rating_filter .TYPE.range', 'rating'],
    year:    ['#year_filter .TYPE.range', 'year'], 
    runtime: ['#runtime_filter .TYPE.range', 'runtime'],
    waist: ['#waist_filter .TYPE.range', 'waist'],
    price: ['#price_filter .TYPE.range', 'price'],
    genre:   ['#genre_criteria input:checkbox:gt(0)', 'genre'] }

and for the second option I would use:

filter_criteria:
    {
    rating:  ['#rating_filter .TYPE.range', 'rating'],
    year:    ['#year_filter .TYPE.range', 'year'], 
    runtime: ['#runtime_filter .TYPE.range', 'runtime'] }

Thanks for any help that you can offer.

Hi,
Is there any way to use a "wildcard" or jocker value in an "equal-type" filter ?
Thanks,
Maxime

Hi,
This plugin is very good. If you know dataTable pipeline, How can I achieve thus using fliter.js?. As we have 1000 of rows which takes lot of time on the page to load. Can we use pipeline method to load few rows and fetch the rows as and when required.

I am using filter.js to show the hotels to book.

I'm using a select field as a filter

<select id="type_filter">
    <option value="">Any type</option>
    <option value="5">Bush Walk</option>
    <option value="6">Cycle</option>
    <option value="11">Drive (2WD)</option>
    <option value="51">Drive (4WD)</option>
</select>

I can't work out how I'd basically reset the filter if you select the "Any type" option.

Could you point me in the right direction?

Hello guys and thank you for the hard work.

I'm just wondering, how is this differente from underscore,js's own filter function?

Hi Jiren

I'm trying to filter on at nested field but I'm not sure how to accomplish this.

The returned JSON data looks like
"subject":[{"id":1,"name":"Dansk","language":1}]

The addCriteria looks like
FJS.addCriteria({ field: 'subject', ele: '#subject_criteria input:checkbox' });

I want to filter on the name of the subject.

You can see a live demo at http://moveout.azurewebsites.net/getTask. There are three results which are not shown because of the filter.

Hi guys,

First I'd like to thank you for the work you've done on this great library, I've seen the demos, very impressive and super fast.

I wasn't able to get a personal demo up and running, is there a chance to decouple the examples in the examples folder separately?
Otherwise, I'd really like to follow a simple example to get the library up and running with a simple Rails app.

Thanks for your help
Costa

Hey,

First, thank you for the great filtering tool!

I have implemented a very similar page as your demo page http://jiren.github.io/filter.js/filterjs.html is. Now I'm trying to sort the same example data as in you demo to ascending order by price. I've tried to read the documents and understand it, but I still got difficulties with the sorting.

Below is my filter_callbacks from filterjs.js file:

var filter_callbacks = {
logger: function(result){
//console.log(result);
},

show_result_count: function(result){
  $('.result_count').text('Found : ' + result.length);
},

tiny_sort: function() {
  $('a[data-fjs]').tsort('.fs_price:visible', {order: 'asc'});
}

};

Here is the options-part:

var options = {
filter_criteria: {
category: ['#category_list input:checkbox', 'service_categories.ARRAY.category_id'],
nonprofit: ['#nonprofit_list input:checkbox' , 'nonprofit.nonprofit_categories.ARRAY.category_id'],
price: ['#price_list input:checkbox .TYPE.range', 'amount'],
amount: ['#price_filter .TYPE.range', 'amount'],
timeleft: ['#timeleft_filter .TYPE.time_range', 'timeleft'],
link_filter: ['#link_filter .TYPE.range', 'amount']
},
search: {input: '#search_box' },
and_filter_on: true, //If any filter selection is zero then select none. For 'OR' filter set 'false'
callbacks: filter_callbacks, //Filter callback execute in filter init and each filtering event.
filter_types: { time_range: timeRangeFilter },
exec_callbacks_on_init: true

};

So what am I doing wrong? I assumed that this kind of code will give me the example data in price order, but it doesnt work.

Best regards,

Ile

I'm using the script with the Wordpress JSON API plugin to generate the data. The API has currentCount, totalCount and page properties but I can't seem to use the streaming options from filter.js as it expects the JSON to be in one file.

Unfortunately this causes some issues as the JSON output is paged. I can output a single file but this causes performance issues.

So is it possible to add support for paged JSON in streaming?

First off: brilliant! Have added this to a project that I'm developing and am just thrilled (as is my client!). Thank you!

One of my filters is "City" and I'd like to add a Google Maps function to "map" the results in the selected city/cities. Can include the lat/lng information for each listing in the JSON file. Just not sure how to pass that information off to GoogleMaps. I "envision" this to be an overlay/separate link with the map marker containing the Title of the listing and a static center address.

Thank you,
Catherine

Hey,

just looked through your readme.

I think you should really prefix data-attributes. Things like "data-value" and "data-target" are to common. So maybe you script conflicts with others on executed on the same side.

"data-fjs-value" etc. would be more unique.
If you want to be very customizable you could include the prefix in the configuration for the class call, so every user can customize it for themselves as needed.
Inside your js you just have to write one or two wrapper methods for getting the attributes. Done.

Thanks for reading
func0der

This is a great script and has been working flawlessly for me in all browsers. Today I got some feedback that it wasn't working in Android browsers. I confirmed that it wasn't working with the default browser in 3.2, 4.3.

Debugging I see the following error when trying to load filter.js

Uncaught ReferenceError: name is not defined http://domain.com/scripts/filter.js:44

Any ideas what would cause this only on this single browser?

On row 49 in filter.js there is a missing semi colon.