Trouble pairing with filter by query addon

[jrdn91]

I'm trying to use the pagination with this plugin

https://www.npmjs.com/package/ember-cli-filter-by-query

This allows me to add a query into a search box and have the results already loaded to filter down based on what property I want to search through.

What I really want is for the user to be able to filter down items using a query, and have those items be used as the content the pagination should use to display.

Currently I have this code attempting to get this to work

  filteredItems: computedFilterByQuery('model', 'item_name', 'query'),
  sort: ['item_name'],
  sortedItems: Ember.computed.sort('filteredItems','sort'),
  pagedItems: pagedArray('sortedItems',{infinite: "unpaged", perPage: 5}),

The filtered items uses the filter by query addon to take the query property (which I'm updating on keyup) to filter down the results by the item_name property, (this is not a query param, it's a property value I'm using to filter by), the sortedItems then takes these and sorts by item_name so they are in alphabetical order. Those are the items I then pass to the pagedArray computed which I'm importing from

import pagedArray from 'ember-cli-pagination/computed/paged-array';

And then display to the page

{{#each pagedItems key="id" as |item|}}
    {{event-item item=item eventItemClicked="transitionToItem"}}
{{/each}}

I then have some scroll/touchmove listeners setup to call an action to load new items when the scroll position gets to a certain point

loadNext: function() {
      this.get('pagedItems').loadNextPage();
      this.set('loadNextItems',false);
}

Pagination and infinite scroll work totally fine, however it seems the filter by query is not filtering items now, I'm not sure if this is a pagination issue where the computed pagedArray is not complying with my filterItems computed or where the disconnect is but I could really use some help.

Ideally the paginated items will update to the right number of items when I search/filter the items, I don't want the item filter to only work on visible items as there could be 100's of items and I don't want the user to have to scroll all the way through all the items to have them loaded before they do a search.

Maybe there is a different way I can pair the pagination with filtering items based on a search input

[oquis]

I have the same problem with a filterable array

[briemarie]

I third this issue - a year and a half later. Any fix or suggestions?

[broerse]

Not sure why but is sometimes helps to use util/filter inside a normal computed property.

import computedFilterByQuery from 'ember-cli-filter-by-query/util/filter';

  filteredContent: Ember.computed('filter', 'query', 'arrangedContent.[]', function() {
    return computedFilterByQuery(
      this.get('arrangedContent'), ['filter'], this.get('query'), { conjunction: 'and', sort: false }
    );
  }),

[broerse]

@Jordan4jc @oquis Sorry I did't know this workaround in 2016.