Report an issue


class since 4.10.0 abstract

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



  • since 4.20.0

    followingSpace : Boolean

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

  • itemTemplate : String

    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

    Indicates the limit of items rendered in the dropdown.

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

  • outputTemplate : String

    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

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


  • dataCallback( matchInfo, callback )

    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 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 );


    matchInfo : matchInfo
    callback : Function

    The callback which should be executed with the matched data.

  • textTestCallback( range )

    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 };


    range : range

    Range representing the caret position.