OBSOLETE SELECTOR.JS CUSTOM MENU

by firegroove

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<!-- <script src="https://cdn.jsdelivr.net/npm/selector3/dist/bundle.js"></script>
 -->
<script src="https://cdn.jsdelivr.net/npm/selector3/dist/selector.js"></script>

<select class="my-class" name="selector" id="selector" data-type="search">     
 
<!--  <select name="filter-select" id="filterSelect" data-label="Filter options" data-type="find">
 -->

  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
	<option>Option 5</option>
  <option>Option 6</option>
  <option>Option 7</option>
  <option>Option 8</option>
  <option>Option 9</option>
  <option>Option 10</option>
  <option>Option 11</option>
</select>

SASS

.selector-element
  position: relative
  width: 320px
  height: 38px
  font-size: .92rem

  *
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif
    box-sizing: border-box

  .selector-selected
    width: 100%
    height: 38px
    cursor: pointer
    background: #fff
    box-shadow: 0 1px 2px rgba(0,0,0,.05)
    padding: 0 28px 0 11px
    border: 1px solid silver
    border-radius: 6px
    transition: .2s ease-in-out

    &.visible
      background: #fbfbfb
      border-radius: 6px 6px 0 0
      transition: none

    &:hover
      background: #fbfbfb
      box-shadow: 0 2px 4px rgba(0,0,0,.1)

    &:after
      content: ''
      position: absolute
      right: 12px
      top: 50%
      transform: translateY(-50%)
      border-top: 6px solid silver
      border-left: 6px solid transparent
      border-right: 6px solid transparent

    p
      display: inline-block
      width: 100%
      height: 100%
      line-height: 36px
      margin: 0
      white-space: nowrap
      text-overflow: ellipsis
      overflow: hidden


  .selector-options
    position: absolute
    top: 100%
    left: 0
    display: none
    width: 100%
    height: auto
    max-height: 210px
    overflow: auto
    z-index: 99
    border: 1px solid silver
    border-top: 0
    border-radius: 0 0 6px 6px
    background: #fff
    box-shadow: 0 2px 4px rgba(0,0,0,.1)

    &.cover
      top: 0
      border-radius: 6px
      border-top: 1px solid silver
      
    &.visible
      display: inline-block

    .selector-filter
      position: sticky
      top: 0
      width: 100%
      height: 32px
      border-bottom: 1px solid silver
      z-index: 2

      input
        width: 100%
        height: 100%
        outline: none
        border: none
        background: #fff url('https://img.icons8.com/material-sharp/24/000000/search.png') left 11px center no-repeat
        background-size: 18px
        font-size: .8rem
        padding: 0 36px

     ...

JavaScript

new Selector({
  element: 'select',
  label: 'My selector',  				
  closed() {
    console.log('Closed!');
  },
  opened() {
    console.log('Opened!');
  },
  selected(instanceElement, selectedItem) {
    console.log('Selected!');
  }
});