datalist-option-wrapper

input要素とdatalist要素による入力候補の操作において面倒な部分を少し楽にするやつ

Usage no npm install needed!

<script type="module">
  import datalistOptionWrapper from 'https://cdn.skypack.dev/datalist-option-wrapper';
</script>

README

datalist-option-wrapper

honeo/datalist-option-wrapper datalist-option-wrapper

なにこれ

渡したIDと配列に応じてdatalist・option要素を操作する。

使い方

$ npm i -S datalist-option-wrapper
import DatalistOptionWrapper from 'datalist-option-wrapper';

作成

DatalistOptionWrapper('id-1', ['hoge', 'fuga']);
<head>
    ...
    <datalist id="id-1">
        <option value="hoge">
        <option value="fuga">
    </datalist>
</head>

変更

DatalistOptionWrapper('id-1', ['hoge', 'fuga', 'piyo']);
<head>
    ...
    <datalist id="id-1">
        <option value="hoge">
        <option value="fuga">
        <option value="piyo">
    </datalist>
</head>

追加

DatalistOptionWrapper('id-2', ['foo', 'bar']);
<head>
    ...
    <datalist id="id-1">
        <option value="hoge">
        <option value="fuga">
        <option value="piyo">
    </datalist>
    <datalist id="id-2">
        <option value="foo">
        <option value="bar">
    </datalist>
</head>