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

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.

input :


            
                function
                |
            
                HTMLInputElement

optional

custom input element or function that returns one

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

Instance Properties


assignableAttributes: 
            
                Array
                |
            
                Object

Attributes settable via constructor options


assignableMethods: 
            
                Array

Methods overridable via constructor options


bindMethods: 
            
                Array

Methods to auto-bind to this


events: 
            
                Array

Event names that can be bound via onEventName constructor options


style: 
            
                string

CSS injected once per component via adoptedStyleSheets


watch: 
            
                Array

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

Instance Methods


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


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


connected()

Called when element is connected to the DOM


disconnected()

Called when element is disconnected from the DOM


initialize()

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


remove(callback)
    
    
    
        →
        
            
                
                    KompElement

Remove element. Fires beforeRemove, calls optional callback, removes from DOM, then fires afterRemove.

Parameters

callback :


            
                function

optional

async callback called between beforeRemove and afterRemove

Returns


                        
                            KompElement

this


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


renderResults(results)
    
    
    
        →
        
            
                
                    Array
                    |
                
                    *

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

Parameters

results :


            
                Array

array of search results

Returns

content to render


trigger(eventName, args)

Trigger an event on this element

Parameters

eventName :


            
                string

event name to trigger

args :

additional arguments

Events


afterConnect

Fired after the element is connected to the DOM and initialized


afterDisconnect

Fired after the element is disconnected from the DOM


afterRemove

Fired after the element is removed


beforeConnect

Fired before the element is connected to the DOM


beforeDisconnect

Fired before the element is disconnected from the DOM


beforeRemove

Fired before the element is removed


results

Fired when results are rendered

Properties

results :


            
                Array

the search results

query :


            
                string

the search query


search

Fired when a search is performed


select

Fired when a result is selected

Properties

result :

the selected result

query :


            
                string

the search query

event :


            
                Event

the originating event