Attribute/ facet input search box - awesome interaction ux - $200
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I think something like this might exist so this bounty is either to point us in the direction of an existing lib with demo, or to code a demo of vanilla code that does what we need. We would like to make a smarter search box in our application. Something that will allow for attribute/facet searching in addition to normal keyword search. Datadog does a really good job at this in their search box. Basically on focus they will either take a normal text input query or they will guide you though choosing attributes to use. As the user inputs the needed logic for a attribute it will convert that to a “chip” and then let them keep moving.

Here is a sample of a simple set of concepts
https://www.dropbox.com/s/n5lzw2wnycaou6u/2021-01-18_10-44-12.MP4?dl=0

A few things are implied here that we need
Set of operators in a list. So as the user types we know they can be choosing from a specific short set of acceptable operators. In data dog this is something like Source, Status, Browser, Application ID etc… after that is either selected or “caught” (meaning user can click enter on the item they want or they can just keep typing and hit : and then we know they choose that attribute correctly) then they will put in a term, this term we would like to hint from a list but also let them input their own value. So in the js we see it we have a list off attributes and then a list of suggested attribute values (unique to the chosen attribute). And then finally when they are done we encapsulate everything in a chip which has an X to be able to remove it.

An advanced concept we would like to also capture is that we can do some basic operators in here as well

https://docs.datadoghq.com/logs/search_syntax/

This lets me search for something like source:(nodejs or python)

Would love a angular demo for this but will be open to a non jquery version as well. Totally open to a lib that might already exist that does what we need and just requires us to figure out how to bind to our datasources but our biggest issue at the moment is just getting the ui interaction right… similar to datadog. Please post demo to repl.it so its easy to run for everyone and live on.

Increased bounty to $200 - the second part I’ll send as a bonus.

Tags
javascript

Crowdsource coding tasks.

2 Solutions


There don't seem to be many open source libraries that provide all the functionality you're needing. Below are some solutions I've managed to find (I will keep looking and update the list):

  • VisualSearch.js ( https://documentcloud.github.io/visualsearch/ ) - This is an old library (last commit was 6/7 years ago). It makes use of JQuery, JQueryUI, Backbone and Underscore. It will probably still work with some wrangling though and you can update the look with a custom stylesheet. It doesn't seem to support the advanced syntax like source:(nodejs or python) but it looks like you can specify a tag multiple times like this source:nodejs source:python

I will update this list as I find more solutions.

Thx for the research here. I’m not sure it’s something we can use in our use case but it’s a good find.
Qdev 1 month ago
Winning solution

Solution

Hello Qdev,

I've made a search bar according to your specifications. The demo includes some static data (attribute and their values like role, status etc.) Using the example from the video, I've mirrored the following features:

  • Type to search for attributes

  • Composable "Chips" in search

  • "Chips" removable by pressing X button

  • Custom chip style depending on the attribute/value

  • Recognizes attribute and suggest values when user types (attribute:)

  • Supports both, keyboard and mouse to navigate (up/down) and select suggestions (attributes, values)

The demo is in vanilla JS, but I'll be happy to share my thought & design process with you/your team and help you integrate it with Angular.

Regarding operators, I can implement them as well. Feel free to send me which ones you would like to have and a demo video from Datadog so I can see how the workflow should look like!

Let me know what you think.

Thanks,
Vladimir

Impressive. I’ll have feedback from the team Monday morning!
Qdev 1 month ago
Looking forward to it! Thanks!
VladimirMikulic 1 month ago
View Timeline