CKEditor Ecosystem Documentation
Search
Report an issue
Home/CKEditor 4/API
Class

CKEDITOR.plugins.autocomplete.configDefinition

class since 4.10.0 abstract
See source

Abstract class describing the definition of the Autocomplete plugin configuration.

It lists properties used to define and create autocomplete configuration definition.

Simple usage:

var definition = {
    dataCallback: dataCallback,
    textTestCallback: textTestCallback,
    throttle: 200
};

Filtering

Properties

  • since 4.20.0

    followingSpace : Boolean

    See source

    Indicates if a following space should be added after inserted match into an editor.

  • itemTemplate : String

    See source

    The panel's item template used to render matches in the dropdown.

    You can use data item properties to customize the template.

    A minimal template must be wrapped with a HTML li element containing the data-id="{id}" attribute.

    var itemTemplate = '<li data-id="{id}"><img src="{iconSrc}" alt="{name}">{name}</li>';

  • itemsLimit : Number

    See source

    Indicates the limit of items rendered in the dropdown.

    For falsy values like 0 or null all items will be rendered.

  • outputTemplate : String

    See source

    Template of markup to be inserted as the autocomplete item gets committed.

    You can use item properties to customize the template.

    var outputTemplate = `<a href="/tracker/{ticket}">#{ticket} ({name})</a>`;

  • throttle : Number

    See source

    Indicates throttle threshold expressed in milliseconds, reducing text checks frequency.

Methods

  • dataCallback( matchInfo, callback )

    See source

    Callback executed to get suggestion data based on the search query. The returned data will be displayed in the autocomplete view.

    // Returns (through its callback) the suggestions for the current query.
// Note: The itemsArray variable is the example "database".
function dataCallback( matchInfo, callback ) {
    // Simple search.
    // Filter the entire items array so only the items that start
    // with the query remain.
    var suggestions = itemsArray.filter( function( item ) {
        return item.name.indexOf( matchInfo.query ) === 0;
    } );

    // Note: The callback function can also be executed asynchronously
    // so dataCallback can do an XHR request or use any other asynchronous API.
    callback( suggestions );
}

    Parameters

    matchInfo : matchInfo
    callback : Function

    The callback which should be executed with the matched data.

  • textTestCallback( range )

    See source

    Callback executed to check if a text next to the selection should open the autocomplete. See the CKEDITOR.plugins.textWatcher's callback argument.

    // Called when the user types in the editor or moves the caret.
// The range represents the caret position.
function textTestCallback( range ) {
    // You do not want to autocomplete a non-empty selection.
    if ( !range.collapsed ) {
        return null;
    }

    // Use the text match plugin which does the tricky job of doing
    // a text search in the DOM. The matchCallback function should return
    // a matching fragment of the text.
    return CKEDITOR.plugins.textMatch.match( range, matchCallback );
}

// Returns a position of the matching text.
// It matches with a word starting from the '@' character
 // up to the caret position.
function matchCallback( text, offset ) {
        // Get the text before the caret.
    var left = text.slice( 0, offset ),
        // Will look for an '@' character followed by word characters.
        match = left.match( /@\w*$/ );

    if ( !match ) {
        return null;
    }
    return { start: match.index, end: offset };
}

    Parameters

    range : range

    Range representing the caret position.