Autocomplete Input

Overview

Autocomplete input is used to add suggestive search in a text box. The data for search is fed through the datasource.

Examples

Default variation

Example
<form action="" class="form form--horizontal" id="autocomplete-outside-form" data-myob-autocomplete>
  <div class="form__body">
    <div class="form__inline">
      <div class="form__group input input--combo">
        <label for="formInput-1" class="input__label">Label</label>
        <input type="text" id="formInput-1" class="input__field" data-autocomplete-suggestions='[{"title":"American Express Australia","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/american-express-australia.html","tags":[]},{"title":"Bell Potter","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/bell-potter.html","tags":[]},{"title":"RBS Morgans","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/rbs-morgans.html","tags":[]},{"title":"NAB","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/nab.html","tags":[]},{"title":"MyState Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/mystate-bank.html","tags":[]},{"title":"Unity Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/unity-bank.html","tags":[]},{"title":"Macquarie Investment Management","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/macquarie-investment-management.html","tags":[]},{"title":"Macquarie Equities","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/macquarie-equities.html","tags":[]},{"title":"IMB Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/imb-bank.html","tags":[]},{"title":"Hume Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/hume-bank.html","tags":[]},{"title":"HSBC","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/hsbc.html","tags":[]},{"title":"G &amp; C Mutual Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/g-and-c-mutual-bank.html","tags":[]},{"title":"Heritage Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/heritage-bank.html","tags":[]},{"title":"Greater Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/greater-bank.html","tags":[]},{"title":"Goulburn Murray Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/goulburn-murray-credit-union.html","tags":[]},{"title":"Ford Cooperative Credit Society","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/Ford-Cooperative-Credit-Society.html","tags":[]},{"title":"Fonterra Australia","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/Fonterra-Australia.html","tags":[]},{"title":"First Choice Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/First-Choice-Credit-Union.html","tags":[]},{"title":"Family First Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/Family-First-Credit-Union.html","tags":[]},{"title":"Elders Rural Services","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/Elders-Rural-Services.html","tags":[]},{"title":"ECU Australia","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/ECU-Australia.html","tags":[]},{"title":"Dnister Ukrainian Credit Co-operative","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/Dnister-Ukrainian-Credit-Co-operative.html","tags":[]},{"title":"Devondale Murray Goulburn","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/Devondale-Murray-Goulburn.html","tags":[]},{"title":"Delphi Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/Delphi-Bank.html","tags":[]},{"title":"DDH Graham Limited","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/DDH-Graham-Limited.html","tags":[]},{"title":"CUA - Credit Union Australia","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/CUA-credit-union-australia.html","tags":[]},{"title":"Credit Union SA","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/Credit-Union-SA.html","tags":[]},{"title":"Northern Beaches Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/Northern-Beaches-Credit-Union.html","tags":[]},{"title":"Community First Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/Community-First-Credit-Union.html","tags":[]},{"title":"Commonwealth Bank of Australia","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/Commonwealth-Bank-of-Australia.html","tags":[]},{"title":"Cairns Penny","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/cairns-penny.html","tags":[]},{"title":"BT Financial Group","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/bt-financial-group.html","tags":[]},{"title":"Broken Hill Community Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/broken-hill-community-credit-union.html","tags":[]},{"title":"BOQ Specialist","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/bqc-specialist.html","tags":[]},{"title":"Beyond Bank Australia","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/beyond-bank-australia.html","tags":[]},{"title":"Rural Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/rural-bank.html","tags":[]},{"title":"Sandhurst Trustees","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/sandhurst-trustees.html","tags":[]},{"title":"Bendigo Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/bendigo-bank.html","tags":[]},{"title":"Westpac","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/westpac.html","tags":[]},{"title":"WAW Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/waw-credit-union.html","tags":[]},{"title":"Warwick Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/warwick-credit-union.html","tags":[]},{"title":"Waddle","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/waddle.html","tags":[]},{"title":"The Shire Local Banking - Sutherland Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/the-shire-local-banking-sutherland-credit-union.html","tags":[]},{"title":"The Rock","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/the-rock.html","tags":[]},{"title":"The Mutual - Maitland Mutual BS Ltd","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/the-mutual-maitland-mutual-building-society.html","tags":[]},{"title":"The Capricornian","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/the-capricornian.html","tags":[]},{"title":"Suncorp","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/suncorp.html","tags":[]},{"title":"Summerland Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/summerland-credit-union.html","tags":[]},{"title":"Bank of South Australia","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/bank-of-south-australia.html","tags":[]},{"title":"Asgard Wealth Solutions","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/asgard-wealth-solutions.html","tags":[]},{"title":"Bank of Melbourne","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/bank-of-melbourne.html","tags":[]},{"title":"St George Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/st-george-bank.html","tags":[]},{"title":"Southern Cross Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/southern-cross-credit-union.html","tags":[]},{"title":"South West Slopes Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/south-west-slopes-credit-union.html","tags":[]},{"title":"South West Credit","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/south-west-credit.html","tags":[]},{"title":"Sydney Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/sydney-credit-union.html","tags":[]},{"title":"Rural Finance","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/rural-finance.html","tags":[]},{"title":"Regional Australia Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/regional-australia-bank.html","tags":[]},{"title":"Rabobank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/rabobank.html","tags":[]},{"title":"Queensland Country Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/queensland-country-credit-union.html","tags":[]},{"title":"PPM - Private Portfolio Managers","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/ppm-private-portfolio-managers.html","tags":[]},{"title":"Credit Suisse Asset Management","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/credit-suisse-asset-management.html","tags":[]},{"title":"Adelaide Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/adelaide-bank.html","tags":[]},{"title":"Peoples Choice Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/peoples-choice-credit-union.html","tags":[]},{"title":"Coastline Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/Coastline-Credit-Union.html","tags":[]},{"title":"Central West Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/Central-West-Credit-Union.html","tags":[]},{"title":"BDCU Alliance Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/bdcredit-union-alliance-bank.html","tags":[]},{"title":"BCU - Bananacoast Community Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/bcredit-union-bananacoast-community-credit-union.html","tags":[]},{"title":"Bartercard Australia","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/bartercard-australia.html","tags":[]},{"title":"P&amp;N Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/pn-bank.html","tags":[]},{"title":"Baptist Financial Services Australia","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/baptist-fnancial-services-australia.html","tags":[]},{"title":"Central Murray Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/Central-Murray-Credit-Union.html","tags":[]},{"title":"Catholic Development Fund","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/Catholic-Development-Fund.html","tags":[]},{"title":"BWA Managed Investments","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/bwa-managed-investments.html","tags":[]},{"title":"Bankwest","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/bankwest.html","tags":[]},{"title":"Bank of Sydney","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/bank-of-sydney.html","tags":[]},{"title":"Bank of Queensland","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/bank-of-queensland.html","tags":[]},{"title":"Bank Australia","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/bank-australia.html","tags":[]},{"title":"B &amp; E","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/b-and-e.html","tags":[]},{"title":"Auswide Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/auswide-bank.html","tags":[]},{"title":"Australian Money Market","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/australian-money-market.html","tags":[]},{"title":"Armidale Diocesan Investment Group","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/armidale-diocesan-investment-group.html","tags":[]},{"title":"Arab Bank Australia","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/arab-bank-australia.html","tags":[]},{"title":"ANZ","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/anz.html","tags":[]},{"title":"Anglican Investment and Development Fund","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/anglican-investment-and-development-fund.html","tags":[]},{"title":"AMP Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/amp-bank.html","tags":[]},{"title":"Ord Minnett","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/ord-minnett.html","tags":[]},{"title":"Holiday Coast Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/holiday-coast-credit-union.html","tags":[]},{"title":"Horizon Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/horizon-credit-union.html","tags":[]},{"title":"Macquarie Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/macquarie-credit-union.html","tags":[]},{"title":"Macquarie Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/macquarie-bank.html","tags":[]},{"title":"Macarthur Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/macarthur-credit-union.html","tags":[]},{"title":"Orange Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/orange-credit-union.html","tags":[]},{"title":"Newcastle Permanent","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/newcastle-permanent.html","tags":[]},{"title":"Northern Inland Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/northern-Inland-credit-union.html","tags":[]},{"title":"Reliance Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/reliance-credit-union.html","tags":[]},{"title":"Quay Mutual Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/quay-mutual-bank.html","tags":[]},{"title":"BNP Paribas","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/bnp-paribas.html","tags":[]},{"title":"Anglican Community Fund","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/AnglicanCommunityFund.html","tags":[]},{"title":"AWA Alliance Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/AWAAllianceBank.html","tags":[]},{"title":"Circle Alliance Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/CircleAllianceBank.html","tags":[]},{"title":"SERVICE ONE Alliance Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/SERVICEONEAllianceBank.html","tags":[]},{"title":"Lutheran Laypeople League","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/lutheran-laypeople-league.html","tags":[]},{"title":"Fire Services Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/fire-services-credit-union.html","tags":[]},{"title":"Illawarra Credit Union","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/illawarra-credit-union.html","tags":[]},{"title":"Defence Bank","url":"/content/public-website/au/accounting-software/bankfeeds/feeds/defence-bank.html","tags":[]}]'>
        <div class="form__append">
          <button class="btn btn--primary is-disabled" type="submit" value="View" disabled>View</button>
        </div>
      </div>
    </div>
  </div>
</form>

Usage guidelines

We're so sorry, there are currently no usage guidelines for this component 😥

If you feel you can help out your fellow designers by creating usage guidelines for this component, please reach out to #cr-marquee on Slack.

Implementation guidelines

Name Attribute Description
Suggestion data data-autocomplete-suggestions Data in which the Autocomplete Input uses to index. Apply to the input element. Populate with a JSON style syntax, e.g. [{
'title':'MYOB',
'url':'https://myob.com',
'tags':['Australia','New Zealand']
}]