DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • The Beginner’s Guide to AI
  • Crafting Mazes
  • Universal Implementation of BFS, DFS, Dijkstra, and A-Star Algorithms
  • Queue in Data Structures and Algorithms

Trending

  • DZone's Article Submission Guidelines
  • LTS JDK 21 Features
  • How to Submit a Post to DZone
  • Log Analysis Using grep
  1. DZone
  2. Data Engineering
  3. Data
  4. Fast, Searchable Dropdown Inputs with React

Fast, Searchable Dropdown Inputs with React

Input fields that are limited to one of 6,000 possible values… That’s a usability nightmare, right?

Swizec Teller user avatar by
Swizec Teller
·
Nov. 18, 16 · Tutorial
Like (10)
Save
Tweet
Share
38.76K Views

Join the DZone community and get the full member experience.

Join For Free

input fields that are limited to one of 6,000 possible values… that’s a usability nightmare, right?

dump it in a dropdown, and you overwhelm your users. how many even know vanilla dropdowns support search? and besides, you can't style those. your designer will throw a sh*t fit. default browser crap in his beautiful design? no, no, that won't do.

looks vanilla, works vanilla. first open is slow, but search is fast if you know it exists. if you don't, you're screwed.

you could give users an input field and validate against the list of possible entries… no way that's going to be a nightmare, eh? is it stanford , stanford , stanford university , stanford university , or stanford university ? some people will enter stnraofd .

no, no, the answer is both . you need an input field and a dropdown. input filters dropdown, dropdown guides users.

step 1: react-select

jed watson's react-select library gives you input fields with dropdowns. users can use the input field or use the dropdown.

implementation looks like this:

import select from 'react-select';
import 'react-select/dist/react-select.css';

const options = [
    // ...
    { value: 'stanford university', label: 'stanford' },
    // ...
];

const field = ({ options }) => (
    <select
        name="university"
        value="one"
        options={options}
        onchange={val => console.log(val)}
    />
);

the <select> component does everything: input field, styled non-vanilla dropdown, mouse interaction, keyboard shortcuts, filtering. the only gotcha is that options have to be an array of { value, label } objects. even if both value and label are the same, i tried.

a few seconds to render the dropdown. a few seconds to filter. the browser's ui thread blocked, and you can't even see what you're typing.

5,258 entries is a lot of entries

step 2: react-virtualized-select

brian vaughn's react-virtualized-select solves the first problem – opening the dropdown. it's a higher order component that does a thing and then your thing works better.

i think it implements paging and hides it behind scroll events. only a few elements render at a time, and everyone's life is better.

here's how you use it:

import select from 'react-virtualized-select';
import 'react-select/dist/react-select.css';
import 'react-virtualized/styles.css'
import 'react-virtualized-select/styles.css'

const options = [
    // ...
    { value: 'stanford university', label: 'stanford' },
    // ...
];

const field = ({ options }) => (
    <select
        name="university"
        value="one"
        options={options}
        onchange={val => console.log(val)}
    />
);

we changed the import select from to use react-virtualized-select and… that's all.

it opens quickly, and i was typing that whole time that nothing was happening. browser's ui thread still blocking.

step 3: react-select-fast-filter-options

brian vaughn's react-select-fast-filter-options is practically too long to mention in a tweet, and it solves the second problem: fast search.

it builds an index of your options and uses advanced computer sciencey algorithms discovered some time in the 60's, probably. we rarely have enough data to worry about actual computer science on the front end, but sometimes we do.

here's how you use it:

import select from 'react-virtualized-select';
import createfilteroptions from 'react-select-fast-filter-options';
import 'react-select/dist/react-select.css';
import 'react-virtualized/styles.css'
import 'react-virtualized-select/styles.css'

const options = [
    // ...
    { value: 'stanford university', label: 'stanford' },
    // ...
];

const filteroptions = createfilteroptions({ options });

const field = ({ options }) => (
    <select
        name="university"
        value="one"
        options={options}
        filteroptions={filteroptions}
        onchange={val => console.log(val)}
    />
);

we added a filteroptions prop to select , which specifies a custom filter implementation, and we used createfilteroptions to instantiate that implementation. no need to worry about how it actually works because it just works™.

looks good, works good. faster even than the vanilla browser implementation

the only gotcha is that you have to pass the same options to both select and createfilteroptions . dynamically generating { value, label } objects from an array won't work.

the good news is that the memoization mobx does for @computed values is good enough, so you can do something like this:

class formdata {
    @observable universities = ['stanford', 'uva', ...];

    @computed get options() {
        return this.universities.map(name => ({ value: name, label: name }));
    }

    @computed get filteroptions() {
        const options = this.options;
        return createfilteroptions({ options });
    }
}

i don't know if it would work with redux. as long as you're careful about the reference thing, you should be fine.

but is it a good idea?

yes. use this approach for all select fields. even the small ones! there's no harm, and it's faster. winning.

React (JavaScript library) Implementation Computer science Filter (software) Computer Brian (software) Data structure Typing IT

Published at DZone with permission of Swizec Teller, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • The Beginner’s Guide to AI
  • Crafting Mazes
  • Universal Implementation of BFS, DFS, Dijkstra, and A-Star Algorithms
  • Queue in Data Structures and Algorithms

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: