logo polydile dile-components

dile-input-search

Web Component to create a customized search input with the tipical search icon and a clear search functionality. Also it provides a "delay" property to wait when a keystroke occurs and when a search is emitted.

This component does not search anything by itself. It's only a search user interface you may use to create a search functionality as you need. Instead of making a search the component emits events with a keyword to tell others that the user want to perform a search action.

Installation

npm i @dile/dile-input-search

Usage

Import the component.

import '@dile/dile-input-search/dile-input-search.js';

Use the component.

<dile-input-search></dile-input-search>

Properties

Methods

Custom events

{
  keyword: "the text searched"
}

CSS Custom Properties

You can customize it using CSS Custom Properties.

Custom propertyDescriptionDefault
--dile-icon-colorIcon color0.5rem
--dile-icon-sizeIcon size24px
--dile-input-widthInput element width100%
--dile-input-border-widthInput element border width1px
--dile-input-border-colorInput element border color#888
--dile-input-border-radiusInput element border radius5px
--dile-input-font-sizeInput element font size1em
--dile-input-line-heightInput element line height1.5em
--dile-input-colorInput text color#303030
--dile-input-background-colorColor for the background input element#fff
--dile-input-paddingPadding for the input text5px
--dile-input-placeholder-colorPlaceholder color#ccc
--dile-input-focus-border-colorBorder color on focus state#6af

dile-input-search demos

Default search input

class MyComponent extends LitElement {
  static get styles() {
    return css`
      
    `
  }

  render() {
    return html`
      <dile-input-search id="search1"></dile-input-search>
      <p>
        <button id="clear">Clear</button>
      </p>
      <div id="message1">Message...</div>
    `
  }
  firstUpdated() {
    this.shadowRoot.getElementById('search1').addEventListener('dile-input-search', (e) => {
      let keyword = e.detail.keyword;
      keyword = keyword ? 'Search is performed. Keyword is: ' + keyword : 'The keyword is cleared';
      this.shadowRoot.getElementById('message1').innerText = keyword;
    });
    this.shadowRoot.getElementById('clear').addEventListener('click', () => {
      this.shadowRoot.getElementById('search1').clear();
    })
  }
}
customElements.define('my-component', MyComponent);
export const JsStory = () => html`<my-component></my-component>`;

Styled search interface

<style>
  .styled {
    --dile-input-border-radius: 0;
    --dile-input-border-color: #e553e3;
    --dile-input-border-width: 4px;
    --dile-input-line-height: 2.5rem;
    --dile-input-background-color: #333;
    --dile-input-placeholder-color: #999;
    --dile-input-color: #fff;
    --dile-input-width: 300px;
    --dile-icon-size: 32px;
    --dile-icon-color: #c923c6;
  }
</style>
<dile-input-search 
  id="search2"
  class="styled" 
  placeholder="Search..."
></dile-input-search>