Autocomplete

Contrast Bootstrap Autocomplete is a component which predicts your next input based on the first few characters you entered. It takes in an Array full of suggestions. You can use ↑ and ↓ arrow keys to navigate through options and use ↵ key to select required option.

Examples

Default Autocomplete example.

######Script

    <script defer type="module">
      var demo1 = new CDBAutocomplete({
        selector: '#cdb-autocomplete',
        minChars: 1,
        source: function (term, suggest) {
          term = term.toLowerCase();
          var choices = [
            'ActionScript',
            'AppleScript',
            'Asp',
            'Assembly',
            'BASIC',
            'Batch',
            'C',
            'C++',
            'CSS',
            'Clojure',
            'COBOL',
            'ColdFusion',
            'Erlang',
            'Fortran',
            'Groovy',
            'Haskell',
            'HTML',
            'Java',
            'JavaScript',
            'Lisp',
            'Perl',
            'PHP',
            'PowerShell',
            'Python',
            'Ruby',
            'Scala',
            'Scheme',
            'SQL',
            'TeX',
            'XML',
          ];
          var suggestions = [];
          for (var i = 0; i < choices.length; i++)
            if (~choices[i].toLowerCase().indexOf(term))
              suggestions.push(choices[i]);
          suggest(suggestions);
        },
      });
    </script>

######HTML

  <div class="cdb-form" style="width: 100%">
    <input
      type="text"
      class="form-control"
      id="cdb-autocomplete"
      name="q"
    />
    <label>Email</label>
  </div>

Usage within a Card

######Typescript

import { Component, OnInit } from '@/core';
@Component({
  selector: 'app-autocompletecontainer',
  templateUrl: './autocompletecontainer.component.html',
  styleUrls: ['./autocompletecontainer.component.scss'],
})
export class AutocompletecontainerComponent implements OnInit {
  colors = ['White', 'Black', 'Green', 'Blue', 'Yellow', 'Red'];
  constructor() {}
  ngOnInit(): void {}
}

<CDBCard>
    <CDBCardBody class="mx-4">
        <div class="text-center">
            <h3 class="dark-grey-text mb-5">
                <strong>Sign in</strong>
            </h3>
        </div>
        <CDBInput label="Your email" group type="email" validate error="wrong" success="right"></CDBInput>
        <CDBInput label="Your password" group type="password" validate containerClass="mb-0"></CDBInput>
        <div style="position: relative">
            <CDBAutocomplete [suggestions]=colors getValue={alertValue} label="Choose a Color">
            </CDBAutocomplete>
        </div>
        <div class="text-center pt-3 mb-3">
            <CDBBtn type="button" [block]=true gradient="blue" class="mx-0 z-depth-1a">
                Sign in
            </CDBBtn>
        </div>
        <p class="dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"
            style="font-size: 0.8rem">
            or Sign up with:
        </p>
        <div class="row my-3 d-flex justify-content-center">
            <CDBBtn type="button" color="white" [circle]=true class="mr-md-3 z-depth-1a">
                <CDBIcon [fab]=true icon="facebook-f" class="blue-text text-center"></CDBIcon>
            </CDBBtn>
            <CDBBtn type="button" color="white" [circle]=true class="mr-md-3 z-depth-1a">
                <CDBIcon [fab]=true icon="twitter" class="blue-text"></CDBIcon>
            </CDBBtn>
            <CDBBtn type="button" color="white" [circle]=true class="z-depth-1a">
                <CDBIcon [fab]=true icon="google-plus-g" class="blue-text"></CDBIcon>
            </CDBBtn>
        </div>
    </CDBCardBody>
</CDBCard>