ElementCreateSearchInput

Callable

• ElementCreateSearchInput(id, dataCallback, options, htmlOptions): HTMLInputElement

---

• Construct a search-based <input> element that offers suggestions based on the passed callbacks output.

  The search suggestions are constructed lazily once the search input is focused.

  @example

  <input type="search" id={id} list={`${id}-datalist`}>
      <datalist id={`${id}-datalist`}>
          <option value="..." />
          ...
      </datalist>
  </input>

  ---

  Parameters

  • id: string

    The ID of the to-be created search input; ${id}-datalist will be assigned the search input's datalist

  • dataCallback: (searchInput) => Iterable<string, any, any>

    A callback returning all values that will be converted into a datalist <option>

  • optionaloptions: { disabled: boolean; maxLength: number; minLength: number; name: string; onInput: (this, ev) => void; onKeydown: (this, ev) => void; parent: Node; pattern: string | RegExp; placeholder: string; size: number; spellcheck: boolean; value: string } = undefined

  • disabled: boolean

  • maxLength: number

    Maximum input length of the search input

  • minLength: number

    Minimum input length of the search input

  • name: string

  • onInput: (this, ev) => void

  • onKeydown: (this, ev) => void

  • parent: Node

    The parent element of the search input; defaults to document.body

  • pattern: string | RegExp

  • placeholder: string

  • size: number

  • spellcheck: boolean

  • value: string

    Value of the search input

  • htmlOptions: Partial<Record<search, Omit<HTMLOptions<input>, tag>>> = null

  Returns HTMLInputElement

  • The newly created search input