const $dropDown = document.getElementById('select');
$dropDown.items = [
  { label: 'New', value: 'new', icon: 'add' },
  { label: 'Save', value: 'save', icon: 'save' },
  { label: 'Save As', value: 'save-as', icon: 'save--series' },
  {
    label: 'Nadine Brooks',
    value: 'nadine',
    icon: 'pin',
  },
  {
    label: 'Laura Ballard',
    value: 'laura',
    icon: 'calculator',
  },
];
$dropDown.addEventListener('goat:change', function (evt) {
  myConsole.log(JSON.stringify(evt.detail, null, 4));
});
    

const $managed = document.getElementById('managed-selected');
$managed.items = [];
$managed.addEventListener('goat-select--search', function (evt) {
  $managed.showLoader = true;
  fakeServerCall(evt.detail.value, function (items) {
    $managed.items = items;
    $managed.showLoader = false;
  });
});
$managed.addEventListener('goat-select--change', function (evt) {
  myConsole.log(JSON.stringify(evt.detail, null, 4));
});

let currentOptionNumber = 2;
function fakeServerCall(searchString, callback) {
  setTimeout(() => {
    const result = [];
    for (let i = 0; i < 8; i++, currentOptionNumber++) {
      result.push({
        label: searchString + " " + currentOptionNumber,
        value: currentOptionNumber,
      });
    }
    callback(result);
  }, 1000);
}