CKEDITOR.plugins.autocomplete.configDefinition

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

Properties

• since 4.20.0

  followingSpace : BooleanCKEDITOR.plugins.autocomplete.configDefinition#followingSpace

  See source

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

• itemTemplate : StringCKEDITOR.plugins.autocomplete.configDefinition#itemTemplate

  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 : NumberCKEDITOR.plugins.autocomplete.configDefinition#itemsLimit

  See source

  Indicates the limit of items rendered in the dropdown.

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

• outputTemplate : StringCKEDITOR.plugins.autocomplete.configDefinition#outputTemplate

  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 : NumberCKEDITOR.plugins.autocomplete.configDefinition#throttle

  See source

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

Methods

• dataCallback( matchInfo, callback )CKEDITOR.plugins.autocomplete.configDefinition#dataCallback

  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 )CKEDITOR.plugins.autocomplete.configDefinition#textTestCallback

  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.