Components

Autocomplete

Autocomplete is a search form which gives autocomplete feedback suggestions to the user as they type into the input field. This component is used to search links within the A-Z list and Degree Finder search. It is also possible to configure an in-content search that searches links within accordion content.

The title and links seen in the demo below are optional and are only used within the in-content search component.

The CSS class .js-autocomplete__search-wrapper, seen in the demo below, is used in order to trigger the JavaScript plugin.

This class may need to be modified along with the custom modification of the JavaScript plugin invocation in order to suit the custom search functionality of the application which this component is implemented within.

Please speak to MC Web and Digital for assistance with the functionality and configuration of this component.

JavaScript class: .js-autocomplete__search-wrapper

This is a very long title to test the line height and spacing

This is an optional paragraph element.

<div class="js-autocomplete__search-wrapper c-autocomplete">
  <h2>This is a very long title to test the line height and spacing</h2>
  <p>This is an optional paragraph element.</p>
  <p>This is an optional paragraph element.</p>
  <form class="c-inline-form c-inline-block-form">
    <input class="c-autocomplete__input u-input--large" name="autocomplete" placeholder="e.g. #insert text example" type="text">
    <div class="c-inline-block-form__controls">
      <button class="c-inline-block-form__controls-button c-btn c-btn--large c-btn--danger" type="submit" value="Go" title="Go">Go</button>
    </div>
  </form>
  <ul class="c-autocomplete__list">
    <li class="c-autocomplete__list-item"><a href="http://www.google.com">link one</a></li>
    <li class="c-autocomplete__list-item"><a href="http://www.adelaide.edu.au/page" target="_blank">link two</a></li>
    <li class="c-autocomplete__list-item"><a href="/path/to/pdf.pdf">link three</a></li>
  </ul>
  <!-- Insert searchable content. e.g. Accordion with A-Z list of links -->
</div>

Autocomplete results

This is a style guide static demonstration of the autocomplete results that show up when a user types text into the autocomplete search field. By default the autocomplete results are not shown. Functionality is seen in the autocomplete demo above as the below example will be automatically generated by the JavaScript for this plugin. See the JavaScript section of the style guide for information on including the required JavaScript.

Text here

Other link to find

Search for

No results found.

<!-- THIS HTML IS AUTOGENERATED BY THE PLUGIN. CLASSES BELOW ARE ADDED IN FOR STYLING OF ITEMS. AUTOCOMPLETE WRAPPING DIV USED SO RESULTS ARE CONTAINED WITHIN ITS WRAPPER -->
<div class="c-autocomplete__results">
  <div class="c-autocomplete__results-item">
    <a class="c-autocomplete__results-item-link" href="#">Text here</a>
  </div>
  <div class="c-autocomplete__results-item">
    <a class="c-autocomplete__results-item-link" href="#">Text here</a>
  </div>
  <div class="c-autocomplete__results-item">
    <a class="c-autocomplete__results-item-link" href="#">Other link to <strong>find</strong></a>
  </div>
  <div class="c-autocomplete__results-item">
    <a class="c-autocomplete__results-item-link" href="#"><em>Search for </em></a>
  </div>
  <div class="c-autocomplete__results-item is-disabled">
    <a class="c-autocomplete__results-item-link"><em>No results found.</em></a>
  </div>
</div>
<!-- END OF AUTOGENERATED CONTENT -->