@author.io/element-datalist
Advanced tools
author-datalist is a fully-stylable datalist component. It is designed to match the functionality of browser default datalists while providing flexibility for customization if desired.
author-datalist is broken down into several components:
author-selected-optionsauthor-optionsauthor-optionThis allows each part of the component to be styled directly. Each of these components can also be used standalone in other applications as well.
We're using BrowserStack to make sure these components work on the browsers developers care about.
There are 4 versions of this element:
You only need to choose one of these files. If you need to support Internet Explorer, older versions of Chrome/Firefox/Safari, then you likely need the ES5 version. Each version has it's own source map, so it's always possible to trace activity back to a specific code block in the source.
The simplest way to use author-datalist is in combination with author-control. This combination makes it simple to create totally stylable datalists. Placing a datalist tag inside an author-control will automatically generate a fully-functional author-datalist element and pair it with a label if provided.
Via Global CDN
<html>
<head>
<script src="https://cdn.author.io/author-elements/base/1.0.0/author-base.min.js"></script>
<script src="https://cdn.author.io/author-elements/datalist/x.x.x/author-datalist.min.js"></script>
</head>
</html>
Via npm
npm install @author.io/element-base -S
npm install @author.io/element-datalist -S
author-control, install it:npm install @author.io/element-control -S
<html>
<head>
<script src="./node_modules/@author.io/element-base/dist/author-base.min.js"></script>
<script src="./node_modules/@author.io/element-base/dist/author-control.min.js"></script>
<script src="./node_modules/@author.io/element-datalist/dist/author-datalist.min.js"></script>
</head>
<body>
<author-control>
<label>Basic Datalist</label>
<input type="text" placeholder="Enter your search query">
<datalist [placeholder="datalist an Option"]>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</datalist>
</author-control>
</body>
</html>
If using without author-control, lay out author-datalist manually using the following markup:
<author-datalist>
<!-- <slot name="afterbegin"></slot> -->
<!-- <slot name="beforeinput"></slot> -->
<input slot="input" type="text" placeholder="Enter your search query">
<!-- <slot name="afterinput"></slot> -->
<!-- <slot name="beforeselectedoptions"></slot> -->
<author-selected-options slot="selectedoptions"></author-selected-options>
<!-- <slot name="beforeselectedoptions"></slot> -->
<!-- <slot name="beforeoptions"></slot> -->
<author-options slot="options">
<author-option value="Option 1">Option 1</author-option>
<author-option value="Option 2">Option 2</author-option>
<author-option value="Option 3">Option 3</author-option>
</author-options>
<!-- <slot name="afteroptions"></slot> -->
<!-- <slot name="beforeend"></slot> -->
</author-datalist>
Additional elements can be added to the various slots within the markup if desired.
author-datalist is optimized for use with NGN Chassis, a PostCSS-powered CSS Framework and Preprocessor. If using author-datalist separately, it and all its child elements can be styled directly with CSS. For a quick start, download the default theme.
The child elements of author-datalist can also be used independently to create customized UI components. See also author-datalist.
FAQs
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Socket now integrates with Bun 1.3’s Security Scanner API to block risky packages at install time and enforce your organization’s policies in local dev and CI.
Research
The Socket Threat Research Team is tracking weekly intrusions into the npm registry that follow a repeatable adversarial playbook used by North Korean state-sponsored actors.