docs(autocomplete): document that mat-autocomplete can be used without mat-form-field (#15928)

Based on the discussion in #15684, it looks like we haven't communicated very well that `mat-autocomplete` can be used with any input, not just `mat-form-field`. These changes add some docs and a live example to showcase the functionality.

Author: crisbeto

src/material-examples/autocomplete-plain-input/autocomplete-plain-input-example.css

@@ -0,0 +1,9 @@
+.example-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.example-full-width {
+  width: 100%;
+}

src/material-examples/autocomplete-plain-input/autocomplete-plain-input-example.html

@@ -0,0 +1,8 @@
+<form class="example-form">
+  <input type="text" placeholder="Search for a street" [formControl]="control" [matAutocomplete]="auto">
+  <mat-autocomplete #auto="matAutocomplete">
+    <mat-option *ngFor="let street of filteredStreets | async" [value]="street">
+      {{street}}
+    </mat-option>
+  </mat-autocomplete>
+</form>

src/material-examples/autocomplete-plain-input/autocomplete-plain-input-example.ts

@@ -0,0 +1,34 @@
+import {Component, OnInit} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {Observable} from 'rxjs';
+import {startWith, map} from 'rxjs/operators';
+
+/**
+ * @title Plain input autocomplete
+ */
+@Component({
+  selector: 'autocomplete-plain-input-example',
+  templateUrl: 'autocomplete-plain-input-example.html',
+  styleUrls: ['autocomplete-plain-input-example.css'],
+})
+export class PlainInputAutocompleteExample implements OnInit {
+  control = new FormControl();
+  streets: string[] = ['Champs-Élysées', 'Lombard Street', 'Abbey Road', 'Fifth Avenue'];
+  filteredStreets: Observable<string[]>;
+
+  ngOnInit() {
+    this.filteredStreets = this.control.valueChanges.pipe(
+      startWith(''),
+      map(value => this._filter(value))
+    );
+  }
+
+  private _filter(value: string): string[] {
+    const filterValue = this._normalizeValue(value);
+    return this.streets.filter(street => this._normalizeValue(street).includes(filterValue));
+  }
+
+  private _normalizeValue(value: string): string {
+    return value.toLowerCase().replace(/\s/g, '');
+  }
+}

src/material/autocomplete/autocomplete.md

@@ -90,6 +90,14 @@ injection token.
 
 <!-- example(autocomplete-auto-active-first-option) -->
 
+### Autocomplete on a custom input element
+
+While `mat-autocomplete` supports attaching itself to a `mat-form-field`, you can also set it on
+any other `input` element using the `matAutocomplete` attribute. This allows you to customize what
+the input looks like without having to bring in the extra functionality from `mat-form-field`.
+
+<!-- example(autocomplete-plain-input) -->
+
 ### Attaching the autocomplete panel to a different element
 
 By default the autocomplete panel will be attached to your input element, however in some cases you