Introducing <rich-input>, a GitHub-like search/filter text input to embed on your site

a month ago by codeinabox to c/webdev

While working on a side-project to better navigate and search through my record collection, I found myself in need of a rich search input: one that accepts free-form text alongside structured filters like artist:“Aphex Twin” or label:“Warp Records” — You know, like the one you see on GitHub when searching/filtering issues. When I quickly realized a standalone custom element for this didn’t exist yet, I nerd sniped myself into building curating one.
dan 1 point a month ago

We tried something like this at work, but users get confused compared to a more traditional tokenized filter UI, where filters are delineated better and each filter has an x next to it to remove just that filter. People aren't used to having multiple filters in one search field, unless it's just doing fulltext search across everything.

I know Github does this, but Github users are a small subset of the population.

path: 0 25851027, hotness: undefined, score: 1, children: 0
webdev
webdev

@programming.dev

login for more options
5884
902
336

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

  • Follow the programming.dev site rules
  • Keep content related to web development
  • If what you're posting relates to one of the related communities, crosspost it into there to help them grow
  • If youre posting an article older than two years put the year it was made in brackets after the title

Related Communities

Wormhole

Some webdev blogs

Not sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

Credits

Icon base by Delapouite under CC BY 3.0 with modifications to add a gradient

go to feed...