SearchField extends KompElement

An input with debounced search and results display via floater or inline list. Provide a search function that returns results, and optionally a renderResult function to customize how each result is displayed.

Example

JS
new SearchField({
    placeholder: 'Search...',
    search: async (query) => {
        const response = await fetch(`/api/search?q=${query}`);
        return response.json();
    },
    result: (item) => item.name,
    select: (item, query) => console.log(item)
})
HTML
<komp-search-field placeholder="Search..."></komp-search-field>

Constructor

new SearchField(options)
options : Object optional
search : function optional

performs the search and returns results. Receives (query:string), returns Promise<Array>

select : function optional

what to do with result, return false to prevent default behavior. Receives (result, query)

result : function optional

renders a single result label/content. Receives (result)

placeholder : string optional

placeholder text for the input

inline : boolean optional

if true, renders results inline instead of in a floater

minLength : number optional

minimum query length before searching

debounce : number optional

milliseconds to debounce search input

empty : string | HTMLElement | function | false optional

content shown when no results found. Set to false to disable.

loader : string | HTMLElement | function optional

content shown in results list while search is loading. Defaults to an animated SVG spinner.

input : function | HTMLInputElement | Object optional

custom input element, function that returns one, or options to pass to dolla.createElement

floater : Object optional

options passed to Floater for the results floater

content : string | HTMLElement | Array | Object optional

content to append to element. Passed to Dolla's content

Static Properties

P   assignableAttributes: Object

Attributes settable via constructor options. Each key is the attribute name and the value is a schema object describing how to handle it.

Example

static assignableAttributes = {
    anchor: { type: 'HTMLElement', default: null, null: true },
    placement: { type: 'string', default: 'bottom', null: false },
    enabled: { type: 'boolean', default: true, null: false },
    data: { type: 'array', default: [], null: false }
}

Properties

type : string | Array.<string>

expected type(s): 'string', 'number', 'boolean', 'object', 'array', 'function', or a class/element name like 'HTMLElement'

default : *

default value when none is provided

null : boolean

whether null is an acceptable value

load : function optional

optional transform applied when reading the attribute value

P   assignableMethods: Array

Methods overridable via constructor options

P   bindMethods: Array

Methods to auto-bind to this

P   events: Array

Event names that can be bound via onEventName constructor options

P   style: string

CSS injected once per component via adoptedStyleSheets

P   styleLayer: string | false

CSS @layer name used to wrap the component's styles when injected via adoptedStyleSheets. Set to a falsy value to disable layering.

P   watch: Array

Attributes to observe for changes. Triggers changed(attribute, was, now) and [attribute]Changed(was, now) callbacks.

Instance Methods

F   addEventListenerFor(element, eventType, args)

Listen for events on another element, automatically cleaned up when this component disconnects

Parameters

element : HTMLElement

element to listen on

eventType : string

event type

args : *

additional arguments passed to addEventListener

F   changed(attribute, was, now)

Called every time an observed attribute changes. Attribute must be listed in static watch.

Parameters

attribute : string

the attribute that changed

was : *

previous value

now : *

new value

F   connected()

Called when element is connected to the DOM

F   disconnected()

Called when element is disconnected from the DOM

F   initialize()

Called once per instantiation, but only after element is connected to the DOM

F   remove(callback) → KompElement

Remove element. Fires remove, calls optional callback, removes from DOM, then fires removed.

Parameters

callback : function optional

async callback called between remove and removed

Returns

F   renderResult(result) → HTMLButtonElement

Render a single result item as a button. Assignable via constructor options.

Parameters

result : *

a single result from the search

Returns

HTMLButtonElement
F   renderResults(results) → Array | *

Render the full results list, including empty state. Assignable via constructor options.

Parameters

results : Array

array of search results

Returns

Array | *

content to render

F   trigger(eventName, args)

Trigger an event on this element

Parameters

eventName : string

event name to trigger

args : *

additional arguments

Events

E   connect

Fired before the element is connected to the DOM (cancellable)

E   connected

Fired after the element is connected to the DOM and initialized

E   disconnect

Fired before the element is disconnected from the DOM (cancellable)

E   disconnected

Fired after the element is disconnected from the DOM

E   remove

Fired before the element is removed (cancellable)

E   removed

Fired after the element is removed

E   results

Fired when results are rendered

Properties

results : Array

the search results

query : string

the search query

E   select

Fired when a result is selected

Properties

result : *

the selected result

query : string

the search query

event : Event

the originating event