Orbita supports the autocomplete feature (also known as type ahead, autofill, auto-suggest, auto-populate, word suggestions, and so on) that gives suggestions to the chatbot users as they type the text in the keyboard input field of the chatbot.
As an admin user, you can achieve this by using the Autocomplete directive.

There are two ways you can use the autocomplete directive:

1. Filtering the content on the client-side

2. Filtering the content on the server-side.

Filtering on the Client-side

In the below example, we use the autocomplete (also known as type ahead, autofill, auto-suggest, auto-populate, word suggestions, and so on) feature that will give country suggestions based on the letters typed.

You can save the list of countries in the content or dynamic data or use place the list in an array in the function node and use it.

Below given is a sample code you can use in a function node in Experience Designer for the autocomplete directive.

if(!msg.payload.orbita) {
    msg.payload.orbita = {};
    }
    if(!msg.payload.orbita.directive) {
    msg.payload.orbita.directive = [];
    }
    
    var country = ['Belarus', 'Belgium', 'Belize', 'Grenada', 'Canada', 'Madagascar'];
    var suggestion=[]; 
    for(var i=0;i<country.length;i++){
        var obj={
            "item": country[i],
            "value": country[i]
        }
        suggestion.push(obj)
    }
    
    msg.payload.orbita['directive'].push({
        'type': 'autocomplete',
        'maxSuggestions': 5,
        'items':suggestion,
        'excludeList': ['what','for'],
        "url":""}
        );
    return msg

Filtering on the Server-side

You can use an external API to fetch the content. As the chatbot user inputs text in the keyboard input box, the chatbot will show the suggestions based on the API response data.

Given below is a sample code you can use in the function node in the Experience Designer for the autocomplete directive.

if(!msg.payload.orbita) {
    msg.payload.orbita = {};
    }
    if(!msg.payload.orbita.directive) {
    msg.payload.orbita.directive = [];
    }

msg.payload.orbita['directive'].push({
    'type': 'autocomplete',
    'maxSuggestions': 5,
    "url":"https://api.publicapis.org/categories"
});
return msg

In conjunction with the Autocomplete directive, use the http in node and place the API URL.

Connect the http in node with the http out node.

Appendix

Property	Description
type	Directive type. In this case, it is ‘autocomplete’.
maxSuggestions	You can set the number of suggestions displayed in the suggestion box.
items	The suggestions array. Note: When the url field is present, the itemsfield should be empty.
excludeList	The words listed in this array are typed by the user, these words will not appear in the suggestion box
url	The API that returns the suggestions list. Note: When the itemsfield is present, the url field should be empty

Related articles