npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

better-select

v0.0.1

Published

A progressively enhanced, lightweight, customizable, and accessible <select> custom element with text input

Downloads

665

Readme

better-select

A progressively enhanced, lightweight, customizable, and accessible <select> custom element with text input.

Features

Lightweight

A single file, weighing only 7KB (2.6KB gzip), and having no dependencies.

Accessible

Based on Adam Silver's article Building an accessible auto-complete control, and some improvements of my own.

Progressively enhanced

All you need to do is wrap your <select> element inside a <better-select> element, and the <select> will be enhanced. If for some reason, your JavaScript fails to load (or until it loads), users will still be able to access a working <select> menu. You don't need to change your forms input handling either.

Basic Usage

<script src="./better-select.js" type="module"></script>

<better-select>
  <select name="country" id="country">
    <option value="">Select</option>
    <option value="in">India</option>
    <option value="au">Australia</option>
    <option value="ja">Japan</option>
  </select>
</better-select>

You can import better-select.js from CDNs like unpkg. The package is also available on npm.

Advanced Usage

Need to use some other name for custom element?

<script type="module">
  import BetterSelect from "./better-select.js";
  customElements.define("my-better-select", BetterSelect);
</script>

Styling?

The custom element can be styled using CSS custom properties. Following properties are presently available with along their default values:

/* input box */
--input-color: #000;
--input-background: #fff;
--input-border-width: 2px;
--input-border-color: #718096;
/* focused/active input box */
--focus-outline-width: 3px;
--focus-outline-color: #ecc94b;
/* options list wrapper */
--menu-max-height: 16em;
/* options */
--item-padding: 0.5em;
--item-color: #000;
--item-background: #fff;
--item-color-active: #fff;
--item-background-active: #111;
/* dropdown arrow */
--caret-color: var(--input-color);

Custom filter function

Method 1: Extend isMatch method of BetterSelect class:

import BetterSelect from "./better-select.js";

class EventBetterSelect extends BetterSelect {
  constructor() {
    super();
  }

  /**
   * @param {HTMLOptionElement} option an option from select element
   * @param {string} value the value user has typed
   * @returns {boolean} whether this option be listed or not
   */
  isMatch(option, value) {
    return option.getAttribute("data-value").startsWith(value);
  }
}

customElements.define("my-better-select", BetterSelect);

Method 2: Add a globally available function name as an attribute to the element

<better-select match="myMatcherFunction">
  <select name="country" id="country">
    <option value="in">India</option>
    <!-- … -->
  </select>
</better-select>

<script>
  function myMatcherFunction(option, value) {
    return option.value.startsWith(value);
  }
</script>

Contributing

  • Reporting issues is welcome.
  • Sending pull requests is more welcome.