Ionic Client Search with Dynamic Dividers

I spent an embarrassing amount of time trying to solve a simple problem today. I am developing a mobile app which has a list of clients. The requirement is that the clients are sorted by last name and has dividers separating alphabetically. When a user starts searching, the dividers should go away but they should come back when the search box is empty, which would display the entire list.

I was a little surprised there was no out of the box way to dynamically create dividers in Ionic, but I give it the benefit of the doubt that it’s not officially released. I found a great ionic-ion-autoListDivider directive written by Andrew McGivery and set off to build on top of it.

As soon as I attached the search-box filter, it started doing strange things. Adding, moving and removing dividers willy-nilly. I tried removing the dividers from the DOM when someone is searching, calling the directive when they’re not… just all sorts of bad ideas with equally bad results.

It took a day and a half to realize I was over thinking and over engineering the solution.

My colleague at work had asked why not just have two separate lists, and display each list accordingly. I subsequently inserted palm to face. That’s just so simple… but a perfect solution to my troubles. View it in all it’s gloriousness below.

See the Pen Dynamic Dividers w/Search by Dara (@aeryith) on CodePen.0

Leave a Reply

Your email address will not be published. Required fields are marked *