As the new Wombat UI evolves and grows, some components take such a large and important role that they are separated out of being a simple UI pattern within our styleguide and turned into a unique, “super” component worthy of its own sort of development process. “Supersearch” is one of these components.

What is it?

Search inputs aren’t anything new, and generally are not particularly interesting. You type some text into a bar, and get back some results. Typeahead and similar libraries/designs can enhance this idea by allowing a more detailed list of instant results dropdown from the input. Building on top of that can net you something like Selectize which then enhances the input itself to support things like tags. Supersearch takes both of these elements and goes even further.

Even Further

What is “extra special” about Supersearch? For starters, it is built off the Ember Power Select, which means it is built in an Ember friendly way and not simply some JS library wrapped up and poorly abstracted (if this sounds familiar, the time zone component uses this too!).

On top of the input itself, we wrap the search bar with some helper buttons that tie straight into the search bar’s functionality. The idea with Supersearch is that whenever it is used, users recognize the UI pattern of this specific bar and know “oh, this is the search with advanced tag powers to drill down data.” The following buttons are currently built-in to the component:

Predefined Filters

Supersearch will generally be used in conjunction with the Supertable (another big component, for another post), to help filter the data contained in the table. Wombat tables are quite diverse in the type of data they present, however the Supersearch will always do its best to provide an initial set of search queries for the user to quickly start hunting down what they need. Usually, these will be the “common” properties someone might search for. For example, if you have a table of campaigns, you might want to quickly search by their status (active, running, done), and the filter will present these to you in a menu so you don’t have to type anything just yet.

Save Queries

On top of the predefined list, users that find themselves entering the same search tags over and over can choose to (if enabled) save their query into the predefined list for quicker access the next time around!

Export Data

If you’re a span of spreadsheets, then you will probably enjoy clicking the export button that will allow you to download a file containing all the data of your specific query. This button, like all the reset, are an optional (but handy) piece of the Supersearch component.

What’s Next?

Supersearch will soon see the light in our future User Management app, so the component will get some real world usage and get adjustments accordingly. A lot of the heavy lifting is done on the API side to return all the smart results based off a user’s query, however there are a few plans on enhancing the UI as well. For example, the filter list right now would max out quite quickly at 10-20 or so predefined items before it becomes a “long list.” How can this be designed in a way to allow an even greater number of tags? How might this tie into the typing portion of the component? There are some fun design challenges up ahead, so we shall see how this component evolves after it is launched!