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

CKEDITOR.plugins.autocomplete.configDefinition

classsince 4.10.0abstract
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.