msc-input-assistant

<msc-input-assistant /> is a web component which help user to input wisely. Users could search or pick option with list we provide. Once options are not good enough for them, they can 「add」 their own options for usage. <msc-input-assistant /> will save options which user added in indexedDB. These options will be available in the same domain.

Basic Usage

<msc-input-assistant /> is a web component. All we need to do is put the required script into your HTML document. Then follow 's html structure and everything will be all set.

• Required Script

<script
  type="module"
  src="https://your-domain/wc-msc-input-assistant.js">        
</script>

• Structure

Put <msc-input-assistant /> into HTML document. It will have different functions and looks with attribute mutation.

<msc-input-assistant>
  <script type="application/json">
    {
      "module": "assistant",
      "options": [
        "iPhone 12",
        "iPhone SE",
        "iPhone 13",
        "iPhone 14",
        "iPhone 14 Pro",
        "iPad mini",
        "iPad",
        "iPad Air",
        "iPad Pro"
      ],
      "l10n": {
        "back": "Back",
        "search": "search",
        "submit": "SUBMIT",
        "inputLabel": "Add option",
        "inputPlaceholder": "add option please"
      },
      "forceupdate": false
    }
  </script>
</msc-input-assistant>

Otherwise, developers could also choose remoteconfig to fetch config for <msc-input-assistant />.

<msc-input-assistant
  remoteconfig="https://your-domain/api-path"
>
</msc-input-assistant>

JavaScript Instantiation

<msc-input-assistant /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module">
import { MscInputAssistant } from 'https://your-domain/wc-msc-input-assistant.js';

// use DOM api
const nodeA = document.createElement('msc-input-assistant');
document.body.appendChild(nodeA);
nodeA.forceupdate = true;
nodeA.options = [
  'iPhone',
  'iPad'
];

// new instance with Class
const nodeB = new MscInputAssistant();
document.body.appendChild(nodeB);
nodeB.options = [
  'Pixel 7 Pro',
  'Pixel 7',
];

// new instance with Class & default config
const config = {
  'module': 'assistant',
  'options': [
    'iPhone 12',
    'iPhone SE',
    'iPhone 13',
    'iPhone 14',
    'iPhone 14 Pro',
    'iPad mini',
    'iPad',
    'iPad Air',
    'iPad Pro'
  ],
  'l10n': {
    'back': 'Back',
    'search': 'search',
    'submit': 'SUBMIT',
    'inputLabel': 'Add option',
    'inputPlaceholder': 'add option please'
  },
  'forceupdate': false
};
const nodeC = new MscInputAssistant(config);
document.body.appendChild(nodeC);
</script>

Style Customization

Developers could apply styles to decorate <msc-input-assistant />'s looking.

<style>
msc-input-assistant {
  --msc-input-assistant-background-color: rgba(242 242 246);
  --msc-input-assistant-module-background-color: rgba(255 255 255);
  --msc-input-assistant-option-text-color: rgba(0 0 0);
  --msc-input-assistant-theme-color: rgba(230 50 89);
  --msc-input-assistant-line-color: rgba(198 198 200);

  /* search */
  --msc-input-assistant-search-background-color: rgba(227, 227, 232);
  --msc-input-assistant-search-text-color: rgba(127 127 132);
  --msc-input-assistant-search-placeholder-text-color: rgba(127 127 132);

  /* submit */
  --msc-input-assistant-input-background-color: rgba(255 255 255);
  --msc-input-assistant-input-theme-color: rgba(15 105 255);
  --msc-input-assistant-input-label-color: rgba(110 119 128);
  --msc-input-assistant-input-text-color: rgba(35 42 49);
  --msc-input-assistant-input-placeholder-text-color: rgba(70 78 86);

  --msc-input-assistant-submit-background-color: rgba(15 105 255);
  --msc-input-assistant-submit-text-color: rgba(255 255 255);

  --msc-input-assistant-no-result-content: 'Oops! nothing exist.';

  --msc-input-assistant-overlay: 29 34 40;
}
</style>

Attributes

<msc-input-assistant /> supports some attributes to let it become more convenience & useful.

• module

Set module for <msc-input-assistant />. will apply this valus as key for data storage (indexedDB). Default is assistant (not set).

<msc-input-assistant
  module="assistant"
>
  ...
</msc-input-assistant>

• options

Set options for <msc-input-assistant />. It should be JSON string. Developers could set defalt options. Default is [] (not set).

<msc-input-assittant
  options='["iPhone","iPad"]'
>
  ...
</msc-input-assittant>

• forceupdate

Set forceupdate for ^lt;msc-input-assistant />. It will decide append data or just remain current options' data. Default is false (not set).

<msc-input-assittant
  forceupdate
>
  ...
</msc-input-assittant>

• l10n

Set localization for <msc-input-assittant />. It will replace some message & button text to anything you like. It should be JSON string. Developers could set back、search、submit、inputLabel and inputPlaceholder.

• back：back to pick mode text. Default is Back.
• search：search field's placeholder. Default is search.
• submit：button 「SUBMIT」text. Default is SUBMIT.
• inputLabel：Add Mode > input field's label. Default is Add option.
• inputPlaceholder：Add Mode > input field's placeholder. Default is add option please.

<msc-input-assistant
  l10n='{"back":"Back","search":"search","submit":"SUBMIT","inputLabel":"Add option","inputPlaceholder":"add option please"}'
>
  ...
</msc-input-assistant>

Properties

| Property Name | Type | Description | | ----------- | ----------- | ----------- | | module | String | Getter / Setter for current storage key. Default is assistant (not set). | | options | Array | Getter / Setter for options. Default is [] (not set). | | forceupdate | Boolean | Getter / Setter for data writing mode. It will decide append data or just remain current options' data. Default is false (not set). | | l10n | Object | Getter / Setter for l10n. It will replace some message & button text to anything you like. Developers could set back、search、submit、inputLabel and inputPlaceholder. | | results | Array | Getter for current display options. |

Methods

| Method Signature | Description | | ----------- | ----------- | | clearStorage | Clear current storage data (by current module). This is an async method. | | add(option) | Add option. This is an async method and makes UI mutated. | | query(keyword) | Query options by keyword and return results. This is an async method and makes UI mutated. |

Events

| Event Signature | Description | | ----------- | ----------- | | msc-input-assistant-pick | Fired when option picked. | | msc-input-assistant-add | Fired when option added. | | msc-input-assistant-delete | Fired when option deleted. |

Reference

• WEBCOMPONENTS.ORG