Add markup to templates

[loque]

Hey, awesome plugin! I made a few modifications to make it easier to style the suggestions:

• added markup to the templates for suggestion and empty so that the user can have more control over the styles just using CSS. The new classes are aa-suggestion-page, aa-suggestion-section and aa-suggestion-empty.
• removed the separator (>>) between pages and sections from the template and added a content prop to .aa-suggestion-page::after to render another separator. This way the user can override it with whatever she wants.
• removed the text no results from the empty template and added a content prop to .aa-suggestion-empty::after to render the test. This way the user can override it with whatever she wants.

The resulting markup would look something like this:

<span class="aa-dropdown-menu aa-with-1">
  <div class="aa-dataset-1">
    <span class="aa-suggestions">
      <div class="aa-suggestion">
        <span class="aa-suggestion-section">Hello</span>
      </div>
      <div class="aa-suggestion">
        <span class="aa-suggestion-page">BLOG POST TITLE</span>
        <span class="aa-suggestion-section">FIRST HEADER</span>
      </div>
      <!-- more suggestions.. -->
    </span>
  </div>
  <span class="aa-suggestion-empty"></span>
</span>

Rendering something like this:

And rendering this when no results are found:

[cmfcmf]

Looks really good, thank you! There is only one thing I am not sure about: Currently, when section and page have the same title, you apply the aa-suggestion-section class and no aa-suggestion-page class. I'd like to see this reversed, i.e. always render the page title and aa-suggestion-page class and render the section title and aa-suggestion-section class when the section title is different from the page title. Would you be able to change that around? :100:

[loque]

Right! Makes more sense 🤦‍♂️. I'll fix that now.