ihk24/gfi-ihk-2024/stories/atoms/search-input/SearchInputComponent.js

import './search-input.scss';
import {createElement} from "../../_global/scripts/helpers";

export const createSearchInput = ({
  typeahead = false,
  placeholder = 'Hier Ihr Thema finden',
  value = null,
  api = null,
  autocomplete = false,
  id = 'search-term',
}) => {
  const input = createElement('input', typeahead ? ['search-field', 'typeahead'] : ['search-field']);
  input.id = id;
  input.type = 'search';
  if (!autocomplete) {
    input.autocomplete = 'off';
  }
  if (value) {
    input.value = value;
  }
  if (placeholder) {
    input.placeholder = placeholder;
  }
  if (api) {
    input.dataset.api = api;
    input.classList.add('typeahead');
  }

  return input;
}