Questions tagged [mat-autocomplete]

Autocomplete component for Angular Material. Use for this Material for angular 2+ (i.e., `@angular/material/autocomplete`).

https://material.angular.io/components/autocomplete

144 questions
0
votes
1 answer

CSS issue in mat-autocomplete Angular-7

I am using mat-autocomplete in that when i select the dropdown and scroll the main bar then that dropbox is not moving with autocomplete input field. enter image description here code:
0
votes
2 answers

Angular mat-autocomplete not filtering values when i use formcontrolname instead [formcontrol]

I have implemented mat-autocomplete in my code (as implemented in the link) and it works perfectly well without any issues. But I need to change [formcontrol] to formcontrolname so that input box will be binded with values populated from DB and…
Santhosh
  • 1
  • 3
0
votes
0 answers

How to have multiple autocomplete elements with selection independent of each other

I am working on a Angular application. I have stackblitz demo that shows one matautocomplete with multiple select enabled but in my application I have array of matautocomplete I want option selected from one element not to interfere with another…
karansys
  • 2,449
  • 7
  • 40
  • 78
0
votes
1 answer

Mat-autocomplete is showing the previous date received from the server but not the latest. How can I fix it to show the latest data received?

ngOnInit(): void { this.filteredAccountOptions = this.accountControl.valueChanges .pipe( startWith(''), map(value => this.accountFilter(value)) ); . . . Actually the "return…
0
votes
1 answer

MatAutoComplete - How to stop opening of MatAutoComplete in mat-chip-list when an unknown text is entered in the input and "ENTER" key is pressed

I am using mat-chip-list along with mat-autocomplete by referring the official angular material example https://material.angular.io/components/chips/overview#chip-input and…
user2216584
  • 5,387
  • 3
  • 22
  • 29
0
votes
1 answer

mat-autocomplete dropdown shows up on top left of the window [Angular]

Right now I'm working on an Angular project and in this project there's a page with 2 mat-autocomplete components, one for selecting country and the other for selecting state. The state one works fine with everything staying at expected places, as…
0
votes
1 answer

Angular mat autocomplete not showing if input setValue

When I click the input element, the autocomplete options are shown. But when I dynamically change the value of the input element, the autocomplete options are not shown.
user5155835
  • 4,392
  • 4
  • 53
  • 97
0
votes
1 answer

Mat-auto complete - example function filter error

I have a problem regarding the example of using the mat-autocomplete material design. The example function presented by google, gives an error in the build, as shown in the image. Google example at :…
0
votes
3 answers

Assigning JSON response to mat-autocomplete

I have an auto-complete that works with the options variable in the component below, but I can't get it to point to the JSON object this.posts There is a field in this.posts called artistName that I'm trying to return as a list an autocomplete. If I…
user6680
  • 79
  • 6
  • 34
  • 78
0
votes
1 answer

How to style mat-option text to get the text outside mat-select panel on hovering over every mat-option text

I want to style hovering on each mat-option text, I wan the text to displayed outside mat-option. In order to achieve this, I applied z-index of very high value, but nothing changed. I tried add z-index to higher value but this hasn't worked out. I…
karansys
  • 2,449
  • 7
  • 40
  • 78
0
votes
0 answers

matautocomplete should do filter when a user searches for an option by entering a query only

Now matAutocomplete is working when value is get changes.I have to restrict the filter operation in matautocomplete when user click the cursor in the autocomplete input field. For me when ever user click the matInput field it should list entire list…
Shimaan
  • 177
  • 2
  • 3
  • 20
0
votes
1 answer

How to display entire option value when hovered in mat-autocomplete

This is demo app that uses mat-autocomplete, I picked from stackoverflow post enter link description here , I want to display option entire value. When the value is long. I found similar question asked enter link description here but this hasn't…
karansys
  • 2,449
  • 7
  • 40
  • 78
0
votes
1 answer

Mat-autocomplete long string, cursor appears at end of string, how to get cursor at start of string?

I have no idea how to run code snippet for angular app in stackoverflow, I am using mat-autocomplete ,I have 128 char long name selected, the cursor appends at the end of the string selected instead on the beginning. Have anyone observed this when…
karansys
  • 2,449
  • 7
  • 40
  • 78
0
votes
1 answer

Angular Autocomplete doesn't seem to work right

I'm trying to do the following form with an input with autocomplete but I'd like that the user only could select the items on the autocomplete list but with the possibility to search the item to select:
0
votes
2 answers

How to add horizontal scroll to mat autocomplete

I am running angular app , I have auto complete on this, I want to add horizontal scroll to the mat-option, I tried applying css style .cdk-overlay-pane { overflow-x: auto; } then applying syle as told in this docuemnt [enter link description…
karansys
  • 2,449
  • 7
  • 40
  • 78