Snippeting article results in autocomplete

I’m having trouble snippeting the results in our search. We are using autocomplete.js to complete it but everything I’ve tried hasn’t worked. Right now our search results look like this, but only because I have hidden the overflow.

I’d like to have it show only about 80 characters and then an ellipsis. I’ve looked everywhere and tried what I can to no avail.

This is the autocomplete code we are using (I’m coming into this late, my boss set everything up):

document.addEventListener(“DOMContentLoaded”, function(event) {
algoliaBundle.(function () {

/** We have nothing to do here if autocomplete is disabled **/
if (!algoliaConfig.autocomplete.enabled) {
  return;
}

/**
 * Set autocomplete templates
 * For templating is used Hogan library
 * Docs: http://twitter.github.io/hogan.js/
 **/
algoliaConfig.autocomplete.templates = {
  suggestions: algoliaBundle.Hogan.compile($('#autocomplete_suggestions_template').html()),
  products: algoliaBundle.Hogan.compile($('#autocomplete_products_template').html()),
  categories: algoliaBundle.Hogan.compile($('#autocomplete_categories_template').html()),
  pages: algoliaBundle.Hogan.compile($('#autocomplete_pages_template').html()),
  additionnalSection: algoliaBundle.Hogan.compile($('#autocomplete_extra_template').html())
};

/**
 * Initialise Algolia client
 * Docs: https://www.algolia.com/doc/javascript
 **/
var algolia_client = algoliaBundle.algoliasearch(algoliaConfig.applicationId, algoliaConfig.autocomplete.apiKey);
algolia_client.addAlgoliaAgent('Magento integration (' + algoliaConfig.extensionVersion + ')');

/** Add autocomplete menu sections **/
if (algoliaConfig.autocomplete.nbOfProductsSuggestions > 0) {
  algoliaConfig.autocomplete.sections.unshift({ hitsPerPage: algoliaConfig.autocomplete.nbOfProductsSuggestions, label: algoliaConfig.translations.products, name: "products"});
}

if (algoliaConfig.autocomplete.nbOfCategoriesSuggestions > 0) {
  algoliaConfig.autocomplete.sections.unshift({ hitsPerPage: algoliaConfig.autocomplete.nbOfCategoriesSuggestions, label: algoliaConfig.translations.categories, name: "categories"});
}

if (algoliaConfig.autocomplete.nbOfQueriesSuggestions > 0) {
  algoliaConfig.autocomplete.sections.unshift({ hitsPerPage: algoliaConfig.autocomplete.nbOfQueriesSuggestions, label: '', name: "suggestions"});
}


/** Setup autocomplete data sources **/
var sources = [],
  i = 0;
$.each(algoliaConfig.autocomplete.sections, function (name, section) {
  var source = getAutocompleteSource(section, algolia_client, $, i);
  
  if (source) {
    sources.push(source);
  }
  
  /** Those sections have already specific placeholder, so do not use the default aa-dataset-{i} class **/
  if (section.name !== 'suggestions' && section.name !== 'products') {
    i++;
  }
});

/**
 * Setup the autocomplete search input
 * For autocomplete feature is used Algolia's autocomplete.js library
 * Docs: https://github.com/algolia/autocomplete.js
 **/
$(algoliaConfig.autocomplete.selector).each(function (i) {
  var menu = $(this);
  var options = {
    hint: false,
    templates: {
      dropdownMenu: '#menu-template'
    },
    dropdownMenuContainer: "#algolia-autocomplete-container",
    debug: algoliaConfig.autocomplete.isDebugEnabled
  };
  
  if (isMobile() === true) {
    // Set debug to true, to be able to remove keyboard and be able to scroll in autocomplete menu
    options.debug = true;
  }
  
  if (algoliaConfig.removeBranding === false) {
    options.templates.footer = '<div class="footer_algolia"><a href="https://www.algolia.com/?utm_source=magento&utm_medium=link&utm_campaign=magento_autocompletion_menu" title="Search by Algolia" target="_blank"><img src="' +algoliaConfig.urls.logo + '" alt="Search by Algolia" /></a></div>';
  }

  sources = algolia.triggerHooks('beforeAutocompleteSources', sources, algolia_client);
  options = algolia.triggerHooks('beforeAutocompleteOptions', options);
  
  if (typeof algoliaHookBeforeAutocompleteStart === 'function') {
    console.warn('Deprecated! You are using an old API for Algolia\'s front end hooks. ' +
      'Please, replace your hook method with new hook API. ' +
      'More information you can find on https://community.algolia.com/magento/doc/m1/frontend-events/');

    var hookResult = algoliaHookBeforeAutocompleteStart(sources, options, algolia_client);
    
    sources = hookResult.shift();
    options = hookResult.shift();
  }
  
  /** Bind autocomplete feature to the input */
  $(this)
    .autocomplete(options, sources)
    .parent()
    .attr('id', 'algolia-autocomplete-tt')
    .on('autocomplete:updated', function (e) {
      fixAutocompleteCssSticky(menu);
    })
    .on('autocomplete:updated', function (e) {
      fixAutocompleteCssHeight(menu);
    }).on('autocomplete:selected', function (e, suggestion, dataset) {
      location.assign(suggestion.url);
    });
  
  $(window).resize(function () {
    fixAutocompleteCssSticky(menu);
  });
});

// Hack to handle buggy onclick event on iOS
$(algoliaConfig.autocomplete.selector).each(function () {
  var data = $(this).data('aaAutocomplete');
  var dropdown = data.dropdown;
  var suggestionClass = '.' + dropdown.cssClasses.prefix + dropdown.cssClasses.suggestion;
  
  var touchmoved;
  dropdown.$menu.on('touchend', suggestionClass, function (e) {
    if(touchmoved === false) {
      e.preventDefault();
      e.stopPropagation();
      
      var url = $(this).find('a').attr('href');
      location.assign(url);
    }
  }).on('touchmove', function (){
    touchmoved = true;
  }).on('touchstart', function(){
    touchmoved = false;
  });
});

});
});

If anyone has any suggestions or help I would love to hear it! Thank you so much!
Britt

Hi @britt
There are potentially two solutions to your problem:

The JS solution
If you want to go this way, please provide us with the template referenced by your code
$(’#autocomplete_suggestions_template’). We’ll see how we can modify it to do what you want.
You can probably add a suggestion.slice(0, 80) in there.

The CSS solution:
This is the best solution IMHO, as it’ll work on all screen sizes. You’ll need to use: text-overflow: ellipsis;

Thank you, I emailed you the code. I’ve tried the text-overflow solution and it doesn’t work.

So I just realized that your email that I replied to had a “noreply” address. So I am going to add the code here and hope you can help me this way.

Here is the code from the autocomplete_suggestion_template: