The autocomplete component displays items underneath a input element that match the input value.

Usage

The Autocomplete uses the JQuery UI Autocomplete. Use the single line input element and autocomplete together.

Setup

To use the Autocomplete you must get JQuery and JQuery UI into your project. This can be done in multiple ways:

1. CDN link
2. Download src files
3. npm

The Autocomplete is fully customisable, here is the default behaviour for Standard Life used in this example.

$( '#documentationSearchExample' ).autocomplete({
    classes: {
        'ui-autocomplete' : 'slb-autocomplete'
    },
    source: yourDataSource,
    create: function() {
        $(this).data('ui-autocomplete')._renderItem = function( ul, item ) {
        return $( '<li>' )
            .addClass( 'slb-autocomplete__item' )
            .append( item.label )
            .appendTo( ul );
        };
    }
});

For more information, visit the API Documentation.