AuthorDatalistElement 
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-option
This 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.
Usage
There are 4 versions of this element:
- author-datalist.min.js (ES6 Minified for Production)
- author-datalist.js (ES6 Unminified for Debugging)
- author-datalist.es5.min.js (ES5 Minified for Production)
- author-datalist.es5.js (ES5 Unminified for Debugging)
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
- If the base class is not yet installed, install it:
npm install @author.io/element-base -S
- Next, install the datalist module locally:
npm install @author.io/element-datalist -S
- If using with
author-control, install it:
npm install @author.io/element-control -S
- Then include the components in your HTML:
<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.
Customization and Styling
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.