title: Apply different CSS styles to Joomla smart search autocomplete suggestions
body: <p>I am using the Smart Search module and component on a website with auto complete suggestions enabled. The module's auto complete suggestions are styled differently than the component's. See the attached screenshots for reference. The <code>autocomplete-suggestions</code> divs are being loaded just before the closing <code>&lt;/body&gt;</code> tag in the HTML. The component's div is rendered before the module's, but they are indistinguishable from each other. It seems that the jQuery autocomplete script knows which one is which, so would customizing the script be the way to go? I know this would be editing core files, but I am no sure there is any way around it.</p>
  
  <p><strong>Component HTML template file JavaScript</strong></p>
  
  <pre><code>var suggest = jQuery('#q').autocomplete({
      serviceUrl: '" . JRoute::_('index.php?option=com_finder&amp;task=suggestions.suggest&amp;format=json&amp;tmpl=component') . "',
      paramName: 'q',
      minChars: 1,
      maxHeight: 400,
      width: 300,
      zIndex: 9999,
      deferRequestBy: 500
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/hRXSm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hRXSm.png" alt="Smart search module"></a><a href="https://i.stack.imgur.com/hukt4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hukt4.png" alt="Smart search component"></a></p>