JSFiddle - React, Tailwind, and code Playground

by ksoncan34

HTML

<script src="https://unpkg.com/select-pure@latest/dist/bundle.min.js"></script>
    <div class="select-wrapper">
      <h1>PureSelect</h1>


      <h3>Autocomplete:</h3>
      <span class="autocomplete-select"></span>
      <button onclick="resetAutocomplete()">Reset</button>


    </div>

CSS

body {
        font-family: "Roboto", sans-serif;
      }

      .select-wrapper {
        margin: auto;
        max-width: 600px;
        width: calc(100% - 40px);
      }

      .select-pure__select {
        align-items: center;
        background: #f9f9f8;
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
        box-sizing: border-box;
        color: #363b3e;
        cursor: pointer;
        display: flex;
        font-size: 16px;
        font-weight: 500;
        justify-content: left;
        min-height: 44px;
        padding: 5px 10px;
        position: relative;
        transition: 0.2s;
        width: 100%;
      }

      .select-pure__options {
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
        box-sizing: border-box;
        color: #363b3e;
        display: none;
        left: 0;
        max-height: 221px;
        overflow-y: scroll;
        position: absolute;
        top: 50px;
        width: 100%;
        z-index: 5;
      }

      .select-pure__select--opened .select-pure__options {
        display: block;
      }

      .select-pure__option {
        background: #fff;
        border-bottom: 1px solid #e4e4e4;
        box-sizing: border-box;
        height: 44px;
        line-height: 25px;
        padding: 10px;
      }

      .select-pure__option--disabled {
        color: #e4e4e4;
      }

      .select-pure__option--selected {
        color: #e4e4e4;
        cursor: initial;
        pointer-events: none;
      }

      .select-pure__option--hidden {
        display: none;
      }

      .select-pure__selected-label {
        align-items: 'center';
        background: #5e6264;
        border-radius: 4px;
        color: #fff;
        cursor: initial;
        display: inline-flex;
        justify-content: 'center';
        margin: 5px 10px 5px 0;
        padding: 3px 7px;
      }

     ...

JavaScript

var customIcon = document.createElement('img');
      customIcon.src = './icon.svg';
      var select = document.querySelector('.autocomplete-select');

      var autocomplete = new SelectPure(select, {
        options: [
          {
            label: "Barbina",
            value: "ba",
          },
          {
            label: "Bigoli",
            value: "bg",
          },
          {
            label: "Bucatini",
            value: "bu",
          },
          {
            label: "Busiate",
            value: "bus",
          },
          {
            label: "Capellini",
            value: "cp",
          },
          {
            label: "Fedelini",
            value: "fe",
          },
          {
            label: "Maccheroni",
            value: "ma",
          },
          {
            label: "Spaghetti",
            value: "sp",
          },
        ],
        multiple: true,
        inlineIcon: customIcon,        
        onChange: value => { console.log(value); },
       
      });
      var resetAutocomplete = function() {
        autocomplete.reset();
      };