User avatar
×

User name

user email

Delete Account
Sign Out
BACK

Almost there!

We've sent an email to with a link to activate your account.
Contact us if you need any help.
BACK

Reset Password

Get New Password
BACK LOG IN

Create Your Account

By creating an account, you agree to the Widget Pro Terms of Service and Privacy Policy.
Register
BACK CREATE ACCOUNT

Login

Sign In

Widget Pro logo. Links to home.
Logo for Widget Pro. It shows an intertwined W and P character.
    User avatar
    ×

    User name

    user email

    Delete Account
    Sign Out
    BACK

    Almost there!

    We've sent an email to with a link to activate your account.
    Contact us if you need any help.
    BACK

    Reset Password

    Get New Password
    BACK LOG IN

    Create Your Account

    By creating an account, you agree to the Widget Pro Terms of Service and Privacy Policy.
    Make a free account
    BACK CREATE ACCOUNT

    Login

    Sign In
    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
    Share by: