UI Builder typeahead - Lazy loading

Bernard Esterhu
Tera Expert

I would like to make use of lazy loading in the typeahead component. This would match the behavior of the typeahead components found on for example the incidents form.

I have not been able to find anything on this feature - I assume it does not exist in the UI Builder typeahead component? I might be able to build this manually if there were a keystroke event in the typeahead component, but I don't think this event exists.

 

Is this feature on the roadmap? Is there a place where new features can be requested?

1 ACCEPTED SOLUTION

Bernard Esterhu
Tera Expert

I was able to configure the lazy loading for the typeahead component, by using the "Typeahead multi value set" event (I didn't realise this is the event that fires when text is typed in the typeahead box).

My client script that fires on the event looks like this:

function handler({api, event, helpers, imports}) {
    console.log("event fired");

    var search_term = event.payload.value;
    console.log("search_term",search_term);

    if (search_term.length > 1) {
        
        var service_query = "operational_status=1^nameSTARTSWITH" + search_term;
        api.setState("service_list_resource_query",service_query);
        api.data.list_of_services.refresh();
    }
    
}

 It only triggers a search if there is more than 1 character to reduce the search load.

View solution in original post

1 REPLY 1

Bernard Esterhu
Tera Expert

I was able to configure the lazy loading for the typeahead component, by using the "Typeahead multi value set" event (I didn't realise this is the event that fires when text is typed in the typeahead box).

My client script that fires on the event looks like this:

function handler({api, event, helpers, imports}) {
    console.log("event fired");

    var search_term = event.payload.value;
    console.log("search_term",search_term);

    if (search_term.length > 1) {
        
        var service_query = "operational_status=1^nameSTARTSWITH" + search_term;
        api.setState("service_list_resource_query",service_query);
        api.data.list_of_services.refresh();
    }
    
}

 It only triggers a search if there is more than 1 character to reduce the search load.