Home

Document Search + Filter Widget

Responsive, feature rich search and filter widget powered by Duda collections and Airtable


Our client needed a way to filter hundreds of documents with various topics and subcategories. We added custom search with autocomplete for the document titles, filtering by category, subcategories that appear conditionally, custom CSS for the checkboxes, custom drop downs, pagination, and conditional content on the resource cards, which I handled with custom Airtable formulas.

Autocomplete search (filters in real time) - This agency needed to provide a search/filter widget with autocomplete to their client due to the size of their resource list. The search uses a 'fuzzy' search so it can find responses that are similar to what is typed in and account for typos. As you type, results filter instantly. You can click on a response to narrow it down to that option only.

Image of search results

Conditional dropdowns - The conditions category had dozens of options, so we lock it unless specialties are selected. If no specialties are selected, a hover tooltip appears to encourage the user to pick a specialty. Any number of specialties and conditions can be selected, and the count of results updates in real time. A scrollbar makes it easier to view possible options to check without running down the entire page.

Image of search results

Custom checkbox + dropdown styles - The inputs needed to be on brand, so I styled them all with CSS.

Image of search results

Custom pagination - The pagination has custom styles and is configured to show previous pages, following pages, and the first and last page.

Image of search results