djett41 / ionic-filter-bar Goto Github PK

I am using this but have a problem, hope you guys can help. Looks like you have not seen this.

1. after making it work on the browser (works fine) i built and ran it in the XCode Simulator, keyboard wont show up, used my computer keyboard and entered the search text, no results showup

2. installed on my iphone. keyboard come up with the search results wont show up.

let me know if there is a better way please..

Hi,
First let me say I like your component and you did a great job. I'm trying to write some component's like you, and yours is a good starting point to improve.

The issue, in some devices the animation of the bar entering is laggy because of the focus happening when the bar is animating,
I've put an timeout in the focus to let the animation finish before it focus the input, and feels much better now. Maybe is something you can add to your component. Sorry i'm a newbie here, maybe i could try to contribute instead.

Great job btw and thank you.

Hi Djett

Thanks for supporting
My Searchbar is showing but i have 3 problem:

• My filter list not show when type text in searchbar, i have debug have text in filter input & have items list object ... but list filter not show
• I can't include $ionicFilterBarConfigProvider in app.js, it show error not found, but my searchbar can show, and i have import js/css like your guide.

Please help me solve this case.

Love the directive, but it appears the documentation doesn't match the code. There is no "$ionicfilterBarConfigProvider" available for injection. There is a '$ionicfilterBarConfig', but it doesn't allow for easy theme switching as the documents suggest. Also, the default theme is set to 'positive', not 'light' or 'stable' as needed.

How can i use this awesome filter bar from a promise?

$ionicFilterBar.show({
items: items,
update: function (filteredItems) {
$scope.events = filteredItems;
},
filterProperties: ['toto', 'tata']
});

Doesn't return the right items.

With only one property it returns 3 items with 2 properties (['toto', 'tata']) it returns 0 items for the same keyword..

Hello,

I have a very big list of items to filter, then it take very long to render.

[Question] Where to add $ionicLoading when search process is ongoing ?

thank you very much.

Thank you for the great plugin. However I have problem with android header bar being pushed down when input appears. By the way, it works perfectly in iOS.

Hello,
Thank you for your amazing work !!

I would like to filter 2 datasSets at the same time.
How can I use ionic-filter-bar to impact 2 lists ?

Thank you
Ron

Compiling ionic.filter.bar.scss throws an error on line 31
"@include transition(opacity 150ms ease-in-out);"

Thanks for the awesome plugin. I have a question about filtering.
Current filter matches All properties defined in filterProperties. Any idea how to set up for any property match?

When run function $ionicFilterBar.show() the cursor is visible and blink with vertical animate.

How can i disable focus while animation?

I am using angular-translate, my Ionic app can change languages while running.
I need to change placeholder text dynamically.
Cancel text I can change without problem in service options, please add placeholder too...

Essentially, I have a list of products and a shopping cart. Each has its own UI state. And each view is collection-repeat.

When viewing products and using $ionicFilterBar it works as expected. However, when clicking an item, it adds the product to the shopping cart and the redirects to shopping cart. When redirecting I get an error in the products collection repeat - it seems be closing the $ionicFilterBar before redirecting is required?

The error starts off as:

Error: collection-repeat tried to compute the height of repeated elements "product in products", but was unable to. Please provide the "item-height" attribute. http://ionicframework.com/docs/api/directive/collectionRepeat/
at HTMLElement.refreshDimensions (http://localhost:8100/lib/ionic/js/ionic.bundle.js:50732:17)

Do I have to structure my objects in any particular way for the filtering to work? I have an array of players. Each player looks like:

{first_name: "john", last_name: "smith"}

My code looks like...

$scope.showFilterBar = function () {
      filterBarInstance = $ionicFilterBar.show({
        items: $scope.players,
        filterProperties: ["first_name", "last_name"],
        update: function (filteredItems, filterText) {
          $scope.players = filteredItems;
          if (filterText) {
            console.log(filterText);
          }
        }
      });
    };

But, I am getting no results back when I start typing a name that exists in my list. Any tips?

To enter a search string I need to double press into the input field. After the second click into the input field the keyboard is shown and the input field is focused. Does anyone else see this too? (running on iOS 8.4)

Hi,

I'm wondering if/how it is possible to access the filter string. Maybe I missed something, but I did not find an option to operate on the filter string.

In particular, I want to switch views, depending on the size of the filter string. For instance, if the length of the filter string is zero, I need to display a trending searches view.

Ingo

I was trying to make the 'Search' text to be translated using angular-translate but with the Ionic-filter-bar is only possible to change the placeholder text in the app.config() phase (requires access to the provider) but in this stage the '$filter' and '$translate' are not available yet.

Do you have any idea how to address this ?

i want to open a modal when an item is clicked from the filtered list, it works fine, but the search bar is displayed on top of the modal' header, i cant see the buttons on modal view, is there any way to show modal header to the front so the search bar will be coverd

Is there currently any way to change the placeholder text when creating and instance of the filter bar? I have a need for two separate filter bars with different placeholder text and styling.

filterBarInstance = $ionicFilterBar.show({
      items: $scope.inventory,
      update: function (filteredItems) {
        $scope.inventory = filteredItems;
      },
      filterProperties: 'term',
      placeholder: "Category",
      theme: 'assertive'
    });

When using ion-side-menu on a tablet and the side menu is visible using 'expose-aside-when' property, the filter bar takes up the whole width of the display instead of just the nav-bar.

Hi guys,

I'm facing some issues recently with this module on a real device (Iphone ios 8), when I click on the button to activate the filter bar, the bar + the keyboard appear and disappear instantly.

Any idea what can be the issue ?

Thx in advance?

Any plans yet for pre-loading a filter text (1) and saving the state of search result (2) [(2) could actually be implemented through (1)).

Motivation: In order to provide a convenient entry point for user's to use the search functionality, an app may provide a list of trending searches, that, if picked by a user, preloads the search filter. This my be an addition to my other issue (#24) and could actually require to realize access to the filter text both read and write.

Theme should be consistent with ion-nav-bar so you aren't required to set the theme.

For example, as in the demo index.html, if the ion-nav-bar directive has a "bar-positive" css class, the filter bar should automatically inherit the theme and have a filter-bar-positive class.

Then you should be able to override this default behavior by configuring a theme as usual, say if you wanted the filter bar to be a different theme than the ion-nav-bar

Hello,

i have an array of objects and each one has some nested objects. I would like to filter on nested properties but filtering using filterExpression seems to filter only on first level properties. I would like to do something like that : filterExpression : "nestedObject.property" but it does not work!
Is that possible;

Thanks!

I'm using the filter bar in a ionic modal to filter through a collection-repeat list of items.

The search bar can be clicked initially and shows as usual but both input and cancel button cannot be clicked.

Any ideas?

Thanks

Filter bar inside a modal doesn't close automatically when I click out or in cancel button.

I already tested your plugin and really cool but got some problem like below:

• Why Nav- bar cannot hide after click search icon and cannot doing vertical transition like my screenshot below:
  
  Its my template HTML:

  <ion-view cache-view="false" view-title="Quotation List">
   <ion-nav-buttons side="secondary">
  <button class="button-icon icon ion-ios-search assertive" ng-click="showFilterBar()">
   </button>
  </ion-nav-buttons>
   <ion-content padding="true"> 
     <div class="list">
         <button class="button button-block button-assertive" ng-click="showDetails()">
     <b>Create New Item</b>
          </button>
            </div>
        </ion-content>
      </ion-view>
  

How I can fix it?

• How I can add more filter Properties not just one single item to show when searching. Example: I want show "price" item instead "name" item?

Publish ionic-filter-bar to npm so that it can be require'd by those who use browserify.

I think it's a bit simple and optional for users. I think it's best to have this feature.
Just a new method in $ionicFilterBarConfig.id()

Thanks

A few issues with the new favorites feature I have noticed

• When clicking the favorites icon, the filter bar will not lose focus (or maybe regains) even after calling input.blur(), or trying ionic.DomUtil.blurAll(). Not sure why but it won't lose focus which causes the modal to look nasty.
• The modal header is pushed out of the screen when the modal comes up. Also the keyboard from filterbar shows over top of the modal. I have played with overflow and z-index none which seem to work. This may be a result of #1?

Need to get some time to check this out but until then, I will set the favoritesEnabled to false by default

Hi, I've been trying to disable the autocapitalize but the only way I know is the 'autocapitalize="off"', inside the input.
Do you have any suggestion of how can we deal with this?

Thanks!

I must say, I really like your component so far.
The ability to customize so many things is very nice and I am stilling testing the component.

The problem I faced is when using the transition 'horizontal' with $ionicFilterBarConfigProvider.
Take a look at the img:

My list of items has hash tags (e.g. #openIssue, #needsAssistance, #urgent) that, when clicked, filter the list of items.

After clicking a hash tag, can I open the search bar with that hash tag as the filterText? Or modify the filterText if someone clicks a hashtag in the middle of another search?

Many thx for this awesome module,
Jordan

is there a way to get the items array from a promise function?

What i'm trying to do is get the search term from ionFilterBar and call my backend server to get the the array that i need to pass to items array.

Thanks

since we get a jqLite wrapped element back from compiling the directive its ok to use that to perform jqLite operations, however there is no need to wrap other elements in angular.element since we cn just use DOM (body, scroll container, container)

Store favorite search terms in local storage in which a user can add, remove, and reorder. clicking on the search term will filter the items with that search term

I was using the regular search bar to filter but instead of the regular:

collection-repeat="item in array | filter: data.searchQuery

I created a custom filter that ignores punctuations when searching:

collection-repeat="item in array | filterPunctuation: data.searchQuery

However this module only supports a simple filter like the first one listed above.
Would it be possible to create a custom filter?

Here is an example of my filter:

.filter('filterPunctuation', function() {
  return function(items, searchTerm) {
    //ignore empty searches
    if (!searchTerm || '' === searchTerm) {
      return items;
    }
    //remove unwanted symbols search term and make lowercase
    searchTerm = searchTerm.replace(/[^\w\s]|_/g, "").toLowerCase();
    return items.filter(function(element, index, array) {
      //remove html characters, and punctuations from title and body properties then convert to lowercase
      var title = element.title.replace(/(<([^>]+)>)/ig, "").replace(/[^\w\s]|_/g, "").toLowerCase();
      var body = element.body.replace(/(<([^>]+)>)/ig, "").replace(/[^\w\s]|_/g, "").toLowerCase();
      return title.includes(searchTerm) || body.includes(searchTerm);
    });
  }
});

Can you help me understand what's going on here?
I have two copies of my app (one with ionic-filter-bar and one without). In the app with ionic-filter-bar, when I click a list item it transitions to the next state correctly. When I click the back button, the app returns to the original state, but this time with the nav bar opacity=0 and translate3d with a large value.
Code in tabs.html

<ion-nav-view title="Home" icon="icon ion-home" name="index-tab" href="#/tab/index"></ion-nav-view>
  </ion-tab>

Here is the before(Safari-view source):

<div class="title title-center header-item" style="left: 56px; right: 56px; -webkit-transform: translate3d(0px, 0, 0);">Welcome</div>

Here is the after (back button pressed, Safari-view source):

   `<div class="title title-center header-item" style="left: 56px; right: 56px; -webkit-transform: translate3d(700.6224975585938px, 0px, 0px); opacity: 0;">Welcome</div>`

Any ideas? I'm new to ionic and right now I'm assuming that this is caused by ionic-filter-bar because the other copy of the app (without ionic-filter-bar) is functioning.

With data that contains both spaces and accents, we ran into the following problem:
For example, if we have this in our database: "Tëst Dátà"
And search for "Test" or "Data", it will show "Tëst Dátà" (as was probably the user's intention).
However, if you search for "Test Data", it doesn't show "Tëst Dátà", so adding spaces to the query somehow messes with its accent-insensitivity. I'm assuming this behaviour isn't as intended.

Hello,

I'm currently using your plugin for an Ionic project, and I really like it!
I'm using your plugin to filter a given set of items, but now I'd like to perform a search on a database.

For now, I'm using something like this:

$scope.events = var events = Events.getFuture();

$scope.showFilterBar = function () {
  filterBarInstance = $ionicFilterBar.show({
    filterProperties: 'name',
    items: Events.all(),
    update: function (filteredItems) {
      $scope.events = filteredItems;
    },
    cancel: function () {
      $scope.events = events;
    }
  });
};

So basically I'm displaying all future events on my page, but do a search on all events, and when the filter bar is canceled I just put my old list of events back.
This is working for now, but my events list won't stop growing, and I don't think I'll be able to afford to load all events in memory just to filter them in the future.

Would it be possible to create an options in $ionicFilterBar.show that would take filterText as parameter and return the list of items that match the search term?
So that I could have something like:

$scope.showFilterBar = function () {
  filterBarInstance = $ionicFilterBar.show({
    search: function (filterText) {
      $scope.events = Events.searchByName(filterText);
    },
    cancel: function () {
      $scope.events = events;
    }
  });
};

I don't think that this is possible with the current implementation.
Thanks!

Hi,

I would like to know if it is possible to filter not only on 1 attribute, but on several like :

       filterProperties: ['title','description']  // This doesn't work

So, if one of the 2 attributes contains what's in the textFilter, then it's kept in the list.

Thank you & kind regards

It would be nice if the keyboard closed after the user hits return. I believe if you put it in

Hi. Thanks for your work. It has been very useful. This is not really an issue but I think there should be a way to supply a custom filter function, which gets called with the arguments filterText, item, index, array and returns true if item passes.
It would be easy to do. If filterProperties is a function then bind filterText as an argument and pass it to angular filter. Something like this maybe:

          scope.filterItems = function(filterText) {
            var filterExp, filteredItems;

            // pass back original list if filterText is empty.  Otherwise filter by supplied properties, or filterText
            if (!filterText.length) {
              filteredItems = scope.items;
            } else {
              if (angular.isFunction(scope.filterProperties)) {  
                filterExp = angular.bind(this, scope.filterProperties, filterText);  
              } else if (angular.isArray(scope.filterProperties)) {
                filterExp = {};
                angular.forEach(scope.filterProperties, function (property) {
                  filterExp[property] = filterText;
                });
              } else if (scope.filterProperties) {
                filterExp = {};
                filterExp[scope.filterProperties] = filterText;
              } else {
                filterExp = filterText;
              }

              filteredItems = scope.filter(scope.items, filterExp);
            }

            $timeout(function() {
              scope.update(filteredItems);
              scope.scrollItemsTop();
            });
          };

Is it possible right now to set the filter via programming?

Is know there is a "filterText" which gives my the text entered char by char in the search text field.
But how can I set this programmatically?

-> For example, if I have a linke / button to push to set the filter to "test1"

User interface:

+========================+
 [ test 1                 (x)   ]  <- ionic-filter-bar 

+-------------------------+

   [ Button "test 1" ] ->   open filter bar and set filtertext to "test 1"
   [ Button "test 2" ] ->   open filter bar and set filtertext to "test 2"
   [ Button "test x" ] ->   open filter bar and set filtertext to "test x"
+========================+

So it should be possible to pre programm a link (button) with for example:

Link:

/www/index.html#/tab/search?filterText="test 1"

So when someone presses the button it opens ionic-filter-bar with "test 1" as a filter text and do the filtering as if one typed in the text.

  $scope.showFilterBar = function () {
    filterBarInstance = $ionicFilterBar.show({
      delay: 1000,
      cancelText: "<i class='ion-ios-close-outline'></i>",
      items: $scope.items,
      update: function (filteredItems, filterText) {
        $scope.items = filteredItems;
        if (filterText) {
          console.log('*** filterText:', filterText);
        }
      }
    });
  };

Hey, thanks for build this very useful component! Now I need your help.

I have this code:

<ion-nav-bar class="bar-custom">
    <ion-nav-title>{{ viewTitle }}</ion-nav-title>

    <ion-nav-buttons data-side="right">
        <a class="button button-clear button-icon ion-plus"
            ui-sref="cliente.insert">
        </a>
        <button class="button button-clear button-icon ion-android-search"
            ng-click="showFilterBar()">
        </button>
    </ion-nav-buttons>
</ion-nav-bar>

And I want to set my own bar style.

Hi there,

I'm not sure if this is included in the release but is it possible to search through multiple properties, whereby the 'search string' can match one Filter Property out of an array of multiple Filter Properties and display the results, rather than the 'search string' having to match all filter properties.

Thanks

Edit: My apologies... I found the answer in a closed issue which is to remove filterProperties. Thanks

I may have missed something but in my case i clearly need to close the search-bar anytime i want.

I'm trying to set filtering properties of my object, but it's not working. This is my code:

• Array of objects

[{
    ID: "11944", 
    NAME: "ANNA PATRICIA", 
    RAZAO_SOCIAL: "ANNA PATRICIA", 
    CNPJ: "27442367000111"
}, {
    ID: "11943", 
    NAME: "BEBIDAS IPIRANGA", 
    RAZAO_SOCIAL: "BEBIDAS IPIRANGA", 
    CNPJ: "16227158000139"
}]

• Filter bar function

$scope.showFilterBar = function() {
    $ionicFilterBar.show({
        items: $scope.clientes,
        filterProperties: ['ID', 'NAME', 'CNPJ'],
        cancelText: 'Cancelar',
        update: function(filteredItems) {
            $scope.clientes = filteredItems;
        }
    });
}

What are I doing wrong?
Can you give me an example?