root22
Coder
Hi there. I'm trying to use this autocomplete script to run on my websites contact form under the Subject area. I posted the javascript with <script></script> but it doesnt seem to work. I have no coding knowledge.
so maybe someone could paste all the parts of the code required to run in a blank html page
https://material.angular.io/components/autocomplete/examples
Im mainly interested in the Assignee example.
Heres the code.
and The CSS
And TS
Also this is the Html from my site where I want to add it to.
Thanks for any help.
so maybe someone could paste all the parts of the code required to run in a blank html page
https://material.angular.io/components/autocomplete/examples
Im mainly interested in the Assignee example.
Heres the code.
HTML:
<form class="example-form">
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Assignee</mat-label>
<input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
and The CSS
CSS:
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}
And TS
Code:
import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
export interface User {
name: string;
}
/**
* @title Display value autocomplete
*/
@Component({
selector: 'autocomplete-display-example',
templateUrl: 'autocomplete-display-example.html',
styleUrls: ['autocomplete-display-example.css'],
})
export class AutocompleteDisplayExample implements OnInit {
myControl = new FormControl<string | User>('');
options: User[] = [{name: 'Mary'}, {name: 'Shelley'}, {name: 'Igor'}];
filteredOptions: Observable<User[]>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges.pipe(
startWith(''),
map(value => {
const name = typeof value === 'string' ? value : value?.name;
return name ? this._filter(name as string) : this.options.slice();
}),
);
}
displayFn(user: User): string {
return user && user.name ? user.name : '';
}
private _filter(name: string): User[] {
const filterValue = name.toLowerCase();
return this.options.filter(option => option.name.toLowerCase().includes(filterValue));
}
}
Also this is the Html from my site where I want to add it to.
HTML:
<div class="row">
<div class="input-field col s12">
<textarea id="subject" name="subject" class="materialize-textarea" class="validate" ></textarea>
<label for="subject">Subject</label>
</div>
</div>
Thanks for any help.
Last edited: