Angular Autocomplete Component

[{"id":"f61760ca-2010-4c99-9af5-655b0291457f","thread_id":"ee26398e-ceb8-4a7e-8b62-f3f50aa9ac2f","created_at":"2025-08-06T14:37:00Z","state":"done","prompt":"Can you write me an Autocomplete component for Angular? It should be able to call a callback to receive new data based on the user input.","reply":"<details><summary>Thinking</summary>\nOkay, the user is asking for an Autocomplete component in Angular that can call a callback to fetch data based on user input. Let me think about how to approach this.\nFirst, I need to recall how Angular components work. Autocomplete usually involves an input field where as the user types, suggestions pop up. The key parts here are handling input events, debouncing to avoid too many requests, and displaying the results.\nThe user mentioned a callback to receive new data. So the component should take a function as an input that gets called with the current input value. That function would probably return an Observable of the data.\nI should use Angular's reactive forms or at least the async pipe. Maybe use FormControl to track the input value. Then, using RxJS operators like debounceTime and switchMap to manage the HTTP requests or the callback.\nWait, the callback is provided by the parent component. So the autocomplete component needs an @Input() for the callback function. Let me structure the component.\nSteps:\n<ol>\n<li>Create a component with an input field.</li>\n<li>Use FormControl to monitor the input changes.</li>\n<li>Apply debounceTime to wait for user to stop typing.</li>\n<li>Use switchMap to call the callback function with the current value.</li>\n<li>Handle the results and display them.</li>\n</ol>\nAlso, need to handle cases where the callback might return an empty list or errors. Maybe show a loading indicator.\nLet me outline the component code.\nFirst, the template. It should have an input, and a dropdown list for suggestions.\nIn the component class:\n<ul>\n<li>@Input() searchCallback: (term: string) => Observable<any[]>; // or maybe a generic type</li>\n<li>control = new FormControl();</li>\n<li>filteredOptions$: Observable<any[]>;</li>\n<li>isLoading = false;</li>\n</ul>\nIn ngOnInit:\nthis.filteredOptions$ = this.control.valueChanges.pipe( \n debounceTime(300), \n distinctUntilChanged(), \n tap(() => this.isLoading = true), \n switchMap(term => this.searchCallback(term).pipe( \n catchError(() => of([])), // handle errors \n tap(() => this.isLoading = false) \n )) \n);\nWait, but the user said \"call a callback to receive new data\". So the callback is a function that returns an Observable. So the parent provides that function.\nAlso, need to handle selecting an option. When a user clicks a suggestion, the input should be set to that value, and maybe emit an event.\nSo the component should have an @Output() for when an option is selected.\nLet me think about the template structure.\n<input [formControl]=\"control\" (keydown)=\"handleKeyDown($event)\" />\n<ul ngIf=\"filteredOptions$ | async as options; else loading\"> \n <li ngFor=\"let option of options\" (click)=\"selectOption(option)\"> \n {{ option }} \n </li> \n</ul> \n<ng-template #loading> \n <li *ngIf=\"isLoading\">Loading...</li> \n</ng-template>\nWait, but the async pipe in the template might not handle the isLoading properly. Maybe better to have a separate isLoading$ observable or a variable.\nAlternatively, use the async pipe with a loading state. But using a separate isLoading variable might be simpler for the template.\nWait, in the pipe above, when the request starts, set isLoading to true, and on completion (success or error), set it to false.\nSo in the component:\nngOnInit() { \n this.control.valueChanges.pipe( \n debounceTime(300), \n distinctUntilChanged(), \n tap(() => this.isLoading = true), \n switchMap(term => this.searchCallback(term).pipe( \n catchError(() => of([])), \n finalize(() => this.isLoading = false) \n )) \n ).subscribe(results => { \n this.filteredOptions = results; \n }); \n}\nBut using async pipe is better to avoid manual subscriptions. So maybe:\nfilteredOptions$: Observable<any[]>; \nisLoading = false;\nngOnInit() { \n this.filteredOptions$ = this.control.valueChanges.pipe( \n startWith(''), \n debounceTime(300), \n distinctUntilChanged(), \n tap(() => this.isLoading = true), \n switchMap(term => this.searchCallback(term).pipe( \n catchError(() => of([])), \n finalize(() => this.isLoading = false) \n )) \n ); \n}\nThen in the template:\n<input [formControl]=\"control\" />\n<div ngIf=\"isLoading\">Loading...</div> \n<ul ngIf=\"(filteredOptions$ | async)?.length > 0\"> \n <li *ngFor=\"let option of filteredOptions$ | async\" (click)=\"selectOption(option)\"> \n {{ option }} \n </li> \n</ul>\nWait, but using async pipe multiple times might cause multiple subscriptions. So better to use *ngIf with async and store the result.\nLike:\n<ng-container ngIf=\"filteredOptions$ | async as options\"> \n <ul ngIf=\"options.length > 0\"> \n <li *ngFor=\"let option of options\" (click)=\"selectOption(option)\"> \n {{ option }} \n </li> \n </ul> \n</ng-container>\nBut then the loading indicator needs to be handled. Maybe have a separate isLoading$ observable.\nAlternatively, use a behavior subject for the loading state.\nBut for simplicity, maybe the component can have a isLoading variable that's set in tap and finalize.\nWait, in the pipe:\nthis.filteredOptions$ = this.control.valueChanges.pipe( \n debounceTime(300), \n distinctUntilChanged(), \n tap(() => this.isLoading = true), \n switchMap(term => this.searchCallback(term).pipe( \n catchError(() => of([])), \n finalize(() => this.isLoading = false) \n )) \n);\nBut this might not work because finalize is called after the observable completes, but the switchMap would switch to a new observable each time, so the finalize would reset isLoading.\nWait, yes. So when a new search starts, isLoading is set to true. When the search completes (either with results or error), isLoading is set to false.\nSo in the template, show loading when isLoading is true and there are no options yet.\nBut when the user types, isLoading becomes true, then when data comes back, it becomes false.\nSo the template can have:\n<div *ngIf=\"isLoading && (filteredOptions$ | async)?.length === 0\">Loading...</div>\nBut maybe better to have a separate loading state.\nAlternatively, use a combineLatest for the options and loading state.\nBut for simplicity, let's proceed with the isLoading variable.\nNow, the callback function. The parent component will provide a function that takes a string and returns an Observable of the results.\nFor example:\nsearchUsers(term: string): Observable<User[]> { \n return this.http.get<User[]>(<code>/api/users?search=${term}</code>); \n}\nThen, in the parent template:\n<app-autocomplete [searchCallback]=\"searchUsers.bind(this)\"></app-autocomplete>\nWait, but in Angular, when passing a method as an input, you need to bind the context. So using .bind(this) is necessary.\nAlternatively, in the parent component, define the callback as an arrow function to preserve context.\nsearchCallback = (term: string) => this.http.get(...);\nBut the user might not know that, so in the example, it's better to show using .bind(this).\nNow, the component should also handle keyboard navigation, like up/down arrows and enter key. But the user didn't specify that, so maybe keep it simple for now. Just basic click selection.\nBut the user said \"Autocomplete component\", which typically includes keyboard navigation. Hmm. The user might expect that, but the main requirement is the callback. Maybe include a basic version without keyboard nav, but mention it as a possible enhancement.\nWait, the user's main request is to have it call a callback based on input. So focus on that.\nLet me outline the component code.\nFirst, the component class:\nimport { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; \nimport { FormControl } from '@angular/forms'; \nimport { Observable, of } from 'rxjs'; \nimport { debounceTime, distinctUntilChanged, switchMap, catchError, finalize } from 'rxjs/operators';\n@Component({ \n selector: 'app-autocomplete', \n template: ``` \n <div class=\"autocomplete\"> \n <input [formcontrol]=\"control\" type=\"text\" placeholder=\"Search...\">\n<div class=\"highlight\">Text Only<pre><code> <div *ngIf=\"isLoading\" class=\"loading\">Loading...</div>\n\n <ul *ngIf=\"(filteredOptions$ | async)?.length > 0\" class=\"options\">\n <li \n *ngFor=\"let option of filteredOptions$ | async\" \n (click)=\"selectOption(option)\"\n >\n {{ option }}\n </li>\n </ul>\n</div>\n</code></pre></div>\n<code>,\n styles: [</code> \n .autocomplete { position: relative; } \n .options { \n position: absolute; \n width: 100%; \n max-height: 200px; \n overflow-y: auto; \n border: 1px solid #ccc; \n list-style: none; \n padding: 0; \n margin: 0; \n z-index: 1000; \n } \n .options li { \n padding: 8px; \n cursor: pointer; \n } \n .options li:hover { background-color: #f0f0f0; } \n .loading { padding: 8px; color: #666; } \n ```] \n}) \nexport class AutocompleteComponent implements OnInit { \n @Input() searchCallback!: (term: string) => Observable<any[]>; \n @Output() optionSelected = new EventEmitter<any>();\ncontrol = new FormControl(); \n filteredOptions$!: Observable<any[]>; \n isLoading = false;\nngOnInit() { \n this.filteredOptions$ = this.control.valueChanges.pipe( \n debounceTime(300), \n distinctUntilChanged(), \n tap(() => { \n this.isLoading = true; \n }), \n switchMap(term => \n this.searchCallback(term).pipe( \n catchError(() => of([])), \n finalize(() => this.isLoading = false) \n ) \n ) \n ); \n }\nselectOption(option: any) { \n this.control.setValue(option); \n this.optionSelected.emit(option); \n } \n}\nWait, but the searchCallback is required, so using !: to assert it's initialized. But maybe better to have a default or check if it's provided.\nAlso, the initial value of filteredOptions$ needs to be set. In ngOnInit, it's assigned.\nBut when the component initializes, the input field is empty, and no search is triggered until the user types. So maybe add startWith('') to trigger an initial search with empty string. But the user might not want that. Depending on the use case. If the API can handle empty terms, then startWith('') would make sense. Otherwise, maybe not.\nThe user didn't specify, so perhaps include startWith('') so that when the component loads, it might show some default suggestions. But the callback should handle empty terms appropriately.\nAlternatively, only trigger when term length is sufficient, like >= 2 characters. But that's up to the callback implementation.\nSo maybe in the component, don't filter by term length, leave it to the callback.\nSo the code as written uses valueChanges, which starts emitting when the control value changes. So initially, when the component loads, control.value is null or empty string, but valueChanges doesn't emit until there's a change. So to trigger an initial search, need startWith('').\nWait, valueChanges emits when the value changes, so if the control starts with an empty string, the first emission is when the user types something. So to have the initial empty string trigger a search, use startWith('').\nBut maybe the user doesn't want to search on empty string. So perhaps the component should only search when term length >= 2, but that's a business logic decision. Since the user didn't specify, better to leave it to the callback.\nSo the component should pass whatever the user types to the callback, and the callback can decide to return empty if term is too short.\nSo in the code, using valueChanges without startWith would mean that the first search happens after the first keystroke. But if the user wants to show suggestions when the input is focused, maybe startWith('') is better.\nHmm. Let's adjust the code to include startWith('') so that when the component initializes, it triggers a search with empty string, which the callback can handle.\nSo:\nthis.filteredOptions$ = this.control.valueChanges.pipe( \n startWith(''), \n debounceTime(300), \n distinctUntilChanged(), \n ... \n);\nBut then, when the component loads, it immediately calls searchCallback(''), which might be what the user wants (e.g., show top results). If not, the callback can return empty.\nSo including startWith('') makes sense.\nAlso, need to handle the case where searchCallback is not provided. But since it's marked as required with !:, Angular will throw an error if not provided. So in the example, the user must provide it.\nNow, testing the component.\nIn the parent component:\nsearchUsers = (term: string) => { \n return this.http.get<User[]>(<code>/api/users?search=${term}</code>); \n};\nThen in template:\n<app-autocomplete [searchCallback]=\"searchUsers\"></app-autocomplete>\nWait, but if searchUsers is a method, then when passing it as [searchCallback]=\"searchUsers\", the context (this) will be lost. So need to bind it.\nSo in parent component:\nsearchUsers = (term: string) => { \n return this.http.get(...); \n};\nThen in template, [searchCallback]=\"searchUsers\" would work because it's an arrow function, which preserves 'this'.\nAlternatively, if it's a regular method:\nsearchUsers(term: string) { \n return this.http.get(...); \n}\nThen need to pass [searchCallback]=\"searchUsers.bind(this)\".\nSo in the example, better to show using an arrow function to avoid context issues.\nNow, the component also emits when an option is selected via optionSelected event.\nThe user might want to know when an option is chosen.\nNow, possible improvements: keyboard navigation, clearing the input, handling errors, etc. But the user's main request is the callback, so the example should focus on that.\nLet me check if the code is correct.\nIn the ngOnInit, filteredOptions$ is assigned. The valueChanges starts with '', then debounces, etc.\nYes.\nAlso, using catchError to return empty array on error, so the UI doesn't break.\nfinalize sets isLoading to false after the observable completes.\nYes.\nNow, the template uses *ngIf=\"(filteredOptions$ | async)?.length > 0\" to show the options list only when there are results.\nThe loading indicator shows when isLoading is true.\nStyling is basic but functional.\nNow, the user might need to customize how the options are displayed. So instead of just {{ option }}, maybe allow a template. But the user didn't ask for that, so keep it simple.\nAlternatively, add an @Input() for a display function, but again, the user's main request is the callback.\nSo the example provided should meet the user's needs.\nWait, the user said \"call a callback to receive new data based on the user input\". The component does that via the searchCallback input.\nYes.\nSo the final code should be as outlined.\nNow, formatting the response according to the guidelines.\nUse markdown, proper lists, code blocks with language.\nMake sure to use hyphens for lists, indent nested lists.\nThe response should have a code block for the component, and maybe some usage instructions.\nAlso, mention that the parent component needs to provide the searchCallback function.\nCheck for metric units, time format, but this is code, so not relevant.\nLanguage is English as the query is in English.\nOkay, time to write the response.\n</div></details>\nHere's an Angular Autocomplete component that fetches data via a callback function:\n<div class=\"codehilite\">TypeScript<pre><code>import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { Observable, of } from 'rxjs';\nimport { \n debounceTime, \n distinctUntilChanged, \n switchMap, \n catchError, \n finalize \n} from 'rxjs/operators';\n\n@Component({\n selector: 'app-autocomplete',\n template: `\n <div class=\"autocomplete-container\">\n <input \n [formControl]=\"control\"\n type=\"text\"\n placeholder=\"Start typing...\"\n class=\"autocomplete-input\"\n />\n\n <div *ngIf=\"isLoading\" class=\"loading-indicator\">Loading...</div>\n\n <ul *ngIf=\"(filteredOptions$ | async)?.length > 0\" class=\"suggestions-list\">\n <li \n *ngFor=\"let option of filteredOptions$ | async\" \n (click)=\"selectOption(option)\"\n class=\"suggestion-item\"\n >\n {{ displayWith ? displayWith(option) : option }}\n </li>\n </ul>\n </div>\n `,\n styles: [`\n .autocomplete-container { position: relative; }\n .autocomplete-input {\n width: 100%;\n padding: 8px;\n font-size: 14px;\n }\n .suggestions-list {\n position: absolute;\n width: 100%;\n max-height: 200px;\n overflow-y: auto;\n border: 1px solid #ddd;\n list-style: none;\n padding: 0;\n margin: 0;\n background: white;\n z-index: 1000;\n box-shadow: 0 2px 6px rgba(0,0,0,0.1);\n }\n .suggestion-item {\n padding: 8px 12px;\n cursor: pointer;\n }\n .suggestion-item:hover {\n background-color: #f5f5f5;\n }\n .loading-indicator {\n padding: 8px;\n color: #666;\n font-style: italic;\n }\n `]\n})\nexport class AutocompleteComponent implements OnInit {\n @Input() searchCallback!: (term: string) => Observable<any[]>;\n @Input() displayWith?: (option: any) => string;\n @Output() optionSelected = new EventEmitter<any>();\n\n control = new FormControl();\n filteredOptions$!: Observable<any[]>;\n isLoading = false;\n\n ngOnInit() {\n this.filteredOptions$ = this.control.valueChanges.pipe(\n debounceTime(300),\n distinctUntilChanged(),\n tap(() => this.isLoading = true),\n switchMap(term => \n this.searchCallback(term || '').pipe(\n catchError(() => of([])),\n finalize(() => this.isLoading = false)\n )\n )\n );\n }\n\n selectOption(option: any) {\n this.control.setValue(this.displayWith ? this.displayWith(option) : option);\n this.optionSelected.emit(option);\n }\n}\n</code></pre></div>\n<h2>Key Features</h2>\n<ul>\n<li>Uses reactive forms with <code>FormControl</code></li>\n<li>Debounces input (300ms) to reduce unnecessary requests</li>\n<li>Handles loading states and errors gracefully</li>\n<li>Supports custom display formatting via <code>displayWith</code> function</li>\n<li>Emits selected option through <code>optionSelected</code> event</li>\n</ul>\n<h2>Usage Example</h2>\n<ol>\n<li>\nParent Component: \n<div class=\"codehilite\">TypeScript<pre><code>searchUsers = (term: string): Observable<User[]> => {\n return this.http.get<User[]>(`/api/users?search=${term}`);\n};\n\nhandleSelection(user: User) {\n console.log('Selected user:', user);\n}\n</code></pre></div>\n</li>\n<li>\nTemplate: \n<div class=\"codehilite\">HTML<pre><code><app-autocomplete\n [searchCallback]=\"searchUsers\"\n [displayWith]=\"(user) => user.name\"\n (optionSelected)=\"handleSelection($event)\"\n></app-autocomplete>\n</code></pre></div>\n</li>\n</ol>\n<h2>Requirements</h2>\n<ul>\n<li>Parent must provide:<ul>\n<li><code>searchCallback</code>: Function that takes search term and returns <code>Observable</code> of results</li>\n<li>Optional <code>displayWith</code> formatter for custom option rendering</li>\n</ul>\n</li>\n<li>Handles empty results and HTTP errors automatically</li>\n<li>Includes basic styling (customize as needed)</li>\n</ul>\n> Note: Remember to import <code>ReactiveFormsModule</code> in your Angular module and handle CORS/server-side requirements for your API calls. The component automatically converts empty inputs to empty strings to prevent <code>undefined</code> values in requests.","md":"<details><summary>Thinking</summary>\n\nOkay, the user is asking for an Autocomplete component in Angular that can call a callback to fetch data based on user input. Let me think about how to approach this.\n\nFirst, I need to recall how Angular components work. Autocomplete usually involves an input field where as the user types, suggestions pop up. The key parts here are handling input events, debouncing to avoid too many requests, and displaying the results.\n\nThe user mentioned a callback to receive new data. So the component should take a function as an input that gets called with the current input value. That function would probably return an Observable of the data.\n\nI should use Angular's reactive forms or at least the async pipe. Maybe use FormControl to track the input value. Then, using RxJS operators like debounceTime and switchMap to manage the HTTP requests or the callback.\n\nWait, the callback is provided by the parent component. So the autocomplete component needs an @Input() for the callback function. Let me structure the component.\n\nSteps:\n\n1. Create a component with an input field.\n2. Use FormControl to monitor the input changes.\n3. Apply debounceTime to wait for user to stop typing.\n4. Use switchMap to call the callback function with the current value.\n5. Handle the results and display them.\n\nAlso, need to handle cases where the callback might return an empty list or errors. Maybe show a loading indicator.\n\nLet me outline the component code.\n\nFirst, the template. It should have an input, and a dropdown list for suggestions.\n\nIn the component class:\n\n- @Input() searchCallback: (term: string) => Observable<any[]>; // or maybe a generic type\n- control = new FormControl();\n- filteredOptions$: Observable<any[]>;\n- isLoading = false;\n\nIn ngOnInit:\n\nthis.filteredOptions$ = this.control.valueChanges.pipe(\n debounceTime(300),\n distinctUntilChanged(),\n tap(() => this.isLoading = true),\n switchMap(term => this.searchCallback(term).pipe(\n catchError(() => of([])), // handle errors\n tap(() => this.isLoading = false)\n ))\n);\n\nWait, but the user said \"call a callback to receive new data\". So the callback is a function that returns an Observable. So the parent provides that function.\n\nAlso, need to handle selecting an option. When a user clicks a suggestion, the input should be set to that value, and maybe emit an event.\n\nSo the component should have an @Output() for when an option is selected.\n\nLet me think about the template structure.\n\n<input [formControl]=\"control\" (keydown)=\"handleKeyDown($event)\" />\n\n<ul *ngIf=\"filteredOptions$ | async as options; else loading\">\n <li *ngFor=\"let option of options\" (click)=\"selectOption(option)\">\n {{ option }}\n </li>\n</ul>\n<ng-template #loading>\n <li *ngIf=\"isLoading\">Loading...</li>\n</ng-template>\n\nWait, but the async pipe in the template might not handle the isLoading properly. Maybe better to have a separate isLoading$ observable or a variable.\n\nAlternatively, use the async pipe with a loading state. But using a separate isLoading variable might be simpler for the template.\n\nWait, in the pipe above, when the request starts, set isLoading to true, and on completion (success or error), set it to false.\n\nSo in the component:\n\nngOnInit() {\n this.control.valueChanges.pipe(\n debounceTime(300),\n distinctUntilChanged(),\n tap(() => this.isLoading = true),\n switchMap(term => this.searchCallback(term).pipe(\n catchError(() => of([])),\n finalize(() => this.isLoading = false)\n ))\n ).subscribe(results => {\n this.filteredOptions = results;\n });\n}\n\nBut using async pipe is better to avoid manual subscriptions. So maybe:\n\nfilteredOptions$: Observable<any[]>;\nisLoading = false;\n\nngOnInit() {\n this.filteredOptions$ = this.control.valueChanges.pipe(\n startWith(''),\n debounceTime(300),\n distinctUntilChanged(),\n tap(() => this.isLoading = true),\n switchMap(term => this.searchCallback(term).pipe(\n catchError(() => of([])),\n finalize(() => this.isLoading = false)\n ))\n );\n}\n\nThen in the template:\n\n<input [formControl]=\"control\" />\n\n<div *ngIf=\"isLoading\">Loading...</div>\n<ul *ngIf=\"(filteredOptions$ | async)?.length > 0\">\n <li *ngFor=\"let option of filteredOptions$ | async\" (click)=\"selectOption(option)\">\n {{ option }}\n </li>\n</ul>\n\nWait, but using async pipe multiple times might cause multiple subscriptions. So better to use *ngIf with async and store the result.\n\nLike:\n\n<ng-container *ngIf=\"filteredOptions$ | async as options\">\n <ul *ngIf=\"options.length > 0\">\n <li *ngFor=\"let option of options\" (click)=\"selectOption(option)\">\n {{ option }}\n </li>\n </ul>\n</ng-container>\n\nBut then the loading indicator needs to be handled. Maybe have a separate isLoading$ observable.\n\nAlternatively, use a behavior subject for the loading state.\n\nBut for simplicity, maybe the component can have a isLoading variable that's set in tap and finalize.\n\nWait, in the pipe:\n\nthis.filteredOptions$ = this.control.valueChanges.pipe(\n debounceTime(300),\n distinctUntilChanged(),\n tap(() => this.isLoading = true),\n switchMap(term => this.searchCallback(term).pipe(\n catchError(() => of([])),\n finalize(() => this.isLoading = false)\n ))\n);\n\nBut this might not work because finalize is called after the observable completes, but the switchMap would switch to a new observable each time, so the finalize would reset isLoading.\n\nWait, yes. So when a new search starts, isLoading is set to true. When the search completes (either with results or error), isLoading is set to false.\n\nSo in the template, show loading when isLoading is true and there are no options yet.\n\nBut when the user types, isLoading becomes true, then when data comes back, it becomes false.\n\nSo the template can have:\n\n<div *ngIf=\"isLoading && (filteredOptions$ | async)?.length === 0\">Loading...</div>\n\nBut maybe better to have a separate loading state.\n\nAlternatively, use a combineLatest for the options and loading state.\n\nBut for simplicity, let's proceed with the isLoading variable.\n\nNow, the callback function. The parent component will provide a function that takes a string and returns an Observable of the results.\n\nFor example:\n\nsearchUsers(term: string): Observable<User[]> {\n return this.http.get<User[]>(```/api/users?search=${term}```);\n}\n\nThen, in the parent template:\n\n<app-autocomplete [searchCallback]=\"searchUsers.bind(this)\"></app-autocomplete>\n\nWait, but in Angular, when passing a method as an input, you need to bind the context. So using .bind(this) is necessary.\n\nAlternatively, in the parent component, define the callback as an arrow function to preserve context.\n\nsearchCallback = (term: string) => this.http.get(...);\n\nBut the user might not know that, so in the example, it's better to show using .bind(this).\n\nNow, the component should also handle keyboard navigation, like up/down arrows and enter key. But the user didn't specify that, so maybe keep it simple for now. Just basic click selection.\n\nBut the user said \"Autocomplete component\", which typically includes keyboard navigation. Hmm. The user might expect that, but the main requirement is the callback. Maybe include a basic version without keyboard nav, but mention it as a possible enhancement.\n\nWait, the user's main request is to have it call a callback based on input. So focus on that.\n\nLet me outline the component code.\n\nFirst, the component class:\n\nimport { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { Observable, of } from 'rxjs';\nimport { debounceTime, distinctUntilChanged, switchMap, catchError, finalize } from 'rxjs/operators';\n\n@Component({\n selector: 'app-autocomplete',\n template: ```\n <div class=\"autocomplete\">\n <input \n [formControl]=\"control\" \n type=\"text\" \n placeholder=\"Search...\"\n />\n \n <div *ngIf=\"isLoading\" class=\"loading\">Loading...</div>\n \n <ul *ngIf=\"(filteredOptions$ | async)?.length > 0\" class=\"options\">\n <li \n *ngFor=\"let option of filteredOptions$ | async\" \n (click)=\"selectOption(option)\"\n >\n {{ option }}\n </li>\n </ul>\n </div>\n ```,\n styles: [```\n .autocomplete { position: relative; }\n .options { \n position: absolute; \n width: 100%; \n max-height: 200px; \n overflow-y: auto; \n border: 1px solid #ccc; \n list-style: none; \n padding: 0; \n margin: 0;\n z-index: 1000;\n }\n .options li { \n padding: 8px; \n cursor: pointer; \n }\n .options li:hover { background-color: #f0f0f0; }\n .loading { padding: 8px; color: #666; }\n ```]\n})\nexport class AutocompleteComponent implements OnInit {\n @Input() searchCallback!: (term: string) => Observable<any[]>;\n @Output() optionSelected = new EventEmitter<any>();\n\n control = new FormControl();\n filteredOptions$!: Observable<any[]>;\n isLoading = false;\n\n ngOnInit() {\n this.filteredOptions$ = this.control.valueChanges.pipe(\n debounceTime(300),\n distinctUntilChanged(),\n tap(() => {\n this.isLoading = true;\n }),\n switchMap(term => \n this.searchCallback(term).pipe(\n catchError(() => of([])),\n finalize(() => this.isLoading = false)\n )\n )\n );\n }\n\n selectOption(option: any) {\n this.control.setValue(option);\n this.optionSelected.emit(option);\n }\n}\n\nWait, but the searchCallback is required, so using !: to assert it's initialized. But maybe better to have a default or check if it's provided.\n\nAlso, the initial value of filteredOptions$ needs to be set. In ngOnInit, it's assigned.\n\nBut when the component initializes, the input field is empty, and no search is triggered until the user types. So maybe add startWith('') to trigger an initial search with empty string. But the user might not want that. Depending on the use case. If the API can handle empty terms, then startWith('') would make sense. Otherwise, maybe not.\n\nThe user didn't specify, so perhaps include startWith('') so that when the component loads, it might show some default suggestions. But the callback should handle empty terms appropriately.\n\nAlternatively, only trigger when term length is sufficient, like >= 2 characters. But that's up to the callback implementation.\n\nSo maybe in the component, don't filter by term length, leave it to the callback.\n\nSo the code as written uses valueChanges, which starts emitting when the control value changes. So initially, when the component loads, control.value is null or empty string, but valueChanges doesn't emit until there's a change. So to trigger an initial search, need startWith('').\n\nWait, valueChanges emits when the value changes, so if the control starts with an empty string, the first emission is when the user types something. So to have the initial empty string trigger a search, use startWith('').\n\nBut maybe the user doesn't want to search on empty string. So perhaps the component should only search when term length >= 2, but that's a business logic decision. Since the user didn't specify, better to leave it to the callback.\n\nSo the component should pass whatever the user types to the callback, and the callback can decide to return empty if term is too short.\n\nSo in the code, using valueChanges without startWith would mean that the first search happens after the first keystroke. But if the user wants to show suggestions when the input is focused, maybe startWith('') is better.\n\nHmm. Let's adjust the code to include startWith('') so that when the component initializes, it triggers a search with empty string, which the callback can handle.\n\nSo:\n\nthis.filteredOptions$ = this.control.valueChanges.pipe(\n startWith(''),\n debounceTime(300),\n distinctUntilChanged(),\n ...\n);\n\nBut then, when the component loads, it immediately calls searchCallback(''), which might be what the user wants (e.g., show top results). If not, the callback can return empty.\n\nSo including startWith('') makes sense.\n\nAlso, need to handle the case where searchCallback is not provided. But since it's marked as required with !:, Angular will throw an error if not provided. So in the example, the user must provide it.\n\nNow, testing the component.\n\nIn the parent component:\n\nsearchUsers = (term: string) => {\n return this.http.get<User[]>(```/api/users?search=${term}```);\n};\n\nThen in template:\n\n<app-autocomplete [searchCallback]=\"searchUsers\"></app-autocomplete>\n\nWait, but if searchUsers is a method, then when passing it as [searchCallback]=\"searchUsers\", the context (this) will be lost. So need to bind it.\n\nSo in parent component:\n\nsearchUsers = (term: string) => {\n return this.http.get(...);\n};\n\nThen in template, [searchCallback]=\"searchUsers\" would work because it's an arrow function, which preserves 'this'.\n\nAlternatively, if it's a regular method:\n\nsearchUsers(term: string) {\n return this.http.get(...);\n}\n\nThen need to pass [searchCallback]=\"searchUsers.bind(this)\".\n\nSo in the example, better to show using an arrow function to avoid context issues.\n\nNow, the component also emits when an option is selected via optionSelected event.\n\nThe user might want to know when an option is chosen.\n\nNow, possible improvements: keyboard navigation, clearing the input, handling errors, etc. But the user's main request is the callback, so the example should focus on that.\n\nLet me check if the code is correct.\n\nIn the ngOnInit, filteredOptions$ is assigned. The valueChanges starts with '', then debounces, etc.\n\nYes.\n\nAlso, using catchError to return empty array on error, so the UI doesn't break.\n\nfinalize sets isLoading to false after the observable completes.\n\nYes.\n\nNow, the template uses *ngIf=\"(filteredOptions$ | async)?.length > 0\" to show the options list only when there are results.\n\nThe loading indicator shows when isLoading is true.\n\nStyling is basic but functional.\n\nNow, the user might need to customize how the options are displayed. So instead of just {{ option }}, maybe allow a template. But the user didn't ask for that, so keep it simple.\n\nAlternatively, add an @Input() for a display function, but again, the user's main request is the callback.\n\nSo the example provided should meet the user's needs.\n\nWait, the user said \"call a callback to receive new data based on the user input\". The component does that via the searchCallback input.\n\nYes.\n\nSo the final code should be as outlined.\n\nNow, formatting the response according to the guidelines.\n\nUse markdown, proper lists, code blocks with language.\n\nMake sure to use hyphens for lists, indent nested lists.\n\nThe response should have a code block for the component, and maybe some usage instructions.\n\nAlso, mention that the parent component needs to provide the searchCallback function.\n\nCheck for metric units, time format, but this is code, so not relevant.\n\nLanguage is English as the query is in English.\n\nOkay, time to write the response.\n\n</details>\n\nHere's an Angular Autocomplete component that fetches data via a callback function:\n\n```typescript\nimport { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { Observable, of } from 'rxjs';\nimport { \n debounceTime, \n distinctUntilChanged, \n switchMap, \n catchError, \n finalize \n} from 'rxjs/operators';\n\n@Component({\n selector: 'app-autocomplete',\n template: `\n <div class=\"autocomplete-container\">\n <input \n [formControl]=\"control\"\n type=\"text\"\n placeholder=\"Start typing...\"\n class=\"autocomplete-input\"\n />\n \n <div *ngIf=\"isLoading\" class=\"loading-indicator\">Loading...</div>\n \n <ul *ngIf=\"(filteredOptions$ | async)?.length > 0\" class=\"suggestions-list\">\n <li \n *ngFor=\"let option of filteredOptions$ | async\" \n (click)=\"selectOption(option)\"\n class=\"suggestion-item\"\n >\n {{ displayWith ? displayWith(option) : option }}\n </li>\n </ul>\n </div>\n `,\n styles: [`\n .autocomplete-container { position: relative; }\n .autocomplete-input {\n width: 100%;\n padding: 8px;\n font-size: 14px;\n }\n .suggestions-list {\n position: absolute;\n width: 100%;\n max-height: 200px;\n overflow-y: auto;\n border: 1px solid #ddd;\n list-style: none;\n padding: 0;\n margin: 0;\n background: white;\n z-index: 1000;\n box-shadow: 0 2px 6px rgba(0,0,0,0.1);\n }\n .suggestion-item {\n padding: 8px 12px;\n cursor: pointer;\n }\n .suggestion-item:hover {\n background-color: #f5f5f5;\n }\n .loading-indicator {\n padding: 8px;\n color: #666;\n font-style: italic;\n }\n `]\n})\nexport class AutocompleteComponent implements OnInit {\n @Input() searchCallback!: (term: string) => Observable<any[]>;\n @Input() displayWith?: (option: any) => string;\n @Output() optionSelected = new EventEmitter<any>();\n\n control = new FormControl();\n filteredOptions$!: Observable<any[]>;\n isLoading = false;\n\n ngOnInit() {\n this.filteredOptions$ = this.control.valueChanges.pipe(\n debounceTime(300),\n distinctUntilChanged(),\n tap(() => this.isLoading = true),\n switchMap(term => \n this.searchCallback(term || '').pipe(\n catchError(() => of([])),\n finalize(() => this.isLoading = false)\n )\n )\n );\n }\n\n selectOption(option: any) {\n this.control.setValue(this.displayWith ? this.displayWith(option) : option);\n this.optionSelected.emit(option);\n }\n}\n```\n\n## Key Features\n\n- Uses reactive forms with ```FormControl```\n- Debounces input (300ms) to reduce unnecessary requests\n- Handles loading states and errors gracefully\n- Supports custom display formatting via ```displayWith``` function\n- Emits selected option through ```optionSelected``` event\n\n## Usage Example\n\n1. **Parent Component**:\n```typescript\nsearchUsers = (term: string): Observable<User[]> => {\n return this.http.get<User[]>(`/api/users?search=${term}`);\n};\n\nhandleSelection(user: User) {\n console.log('Selected user:', user);\n}\n```\n\n2. **Template**:\n```html\n<app-autocomplete\n [searchCallback]=\"searchUsers\"\n [displayWith]=\"(user) => user.name\"\n (optionSelected)=\"handleSelection($event)\"\n></app-autocomplete>\n```\n\n## Requirements\n\n- Parent must provide:\n - ```searchCallback```: Function that takes search term and returns ```Observable``` of results\n - Optional ```displayWith``` formatter for custom option rendering\n- Handles empty results and HTTP errors automatically\n- Includes basic styling (customize as needed)\n\n> Note: Remember to import ```ReactiveFormsModule``` in your Angular module and handle CORS/server-side requirements for your API calls. The component automatically converts empty inputs to empty strings to prevent ```undefined``` values in requests.","profile":{"id":null,"name":null,"model":"qwen-3-235b-a22b-thinking","model_name":"Qwen3-235B (reasoning)","model_provider":"qwen","model_input_limit":1000000,"recommended":false,"model_info":"\n\n<div class=\"heading\">\n <div class=\"left\">\n \n \n \n <svg class=\"model-icon icon-xs\" data-model=\"qwen-3-235b-a22b-thinking\">\n <use href=\"#icon-qwen\"/>\n </svg>\n <h3>\n \n Alibaba\n \n none\n </h3>\n </div>\n\n \n <a href=\"/settings?p=custom_assistant&id=none\">\n <svg class=\"icon-sm edit-icon\" aria-hidden=\"true\">\n <use href=\"#icon-pencil\" />\n </svg>\n </a>\n \n</div>\n\n\n<hr />\n<ul>\n \n <li>\n <h4>\n Cost\n </h4>\n \n \n \n \n\n \n \n \n\n <div class=\"score\" aria-label=\"Relatively cheap\">\n \n \n \n \n <div aria-hidden=\"true\" class=\"filled-cost --low\"></div>\n \n \n \n \n \n <div aria-hidden=\"true\" class=\"filled-cost --low\"></div>\n \n \n \n \n \n <div aria-hidden=\"true\" class=\"unfilled-cost --low\"></div>\n \n \n \n \n \n <div aria-hidden=\"true\" class=\"unfilled-cost --low\"></div>\n \n \n \n \n \n <div aria-hidden=\"true\" class=\"unfilled-cost --low\"></div>\n \n \n </div>\n\n </li>\n <li>\n <h4>\n Quality\n </h4>\n \n \n \n \n\n \n \n \n\n <div class=\"score\" aria-label=\"Rated 4 out of 5\">\n \n \n \n <div aria-hidden=\"true\" class=\"filled-bubble\"></div>\n \n \n \n \n <div aria-hidden=\"true\" class=\"filled-bubble\"></div>\n \n \n \n \n <div aria-hidden=\"true\" class=\"filled-bubble\"></div>\n \n \n \n \n <div aria-hidden=\"true\" class=\"filled-bubble\"></div>\n \n \n \n \n <div aria-hidden=\"true\" class=\"unfilled-bubble\"></div>\n \n \n </div>\n\n </li>\n <li>\n <h4>\n Speed\n </h4>\n \n \n \n \n\n \n \n \n\n <div class=\"score\" aria-label=\"Rated 2 out of 5\">\n \n \n \n <div aria-hidden=\"true\" class=\"filled-bubble\"></div>\n \n \n \n \n <div aria-hidden=\"true\" class=\"filled-bubble\"></div>\n \n \n \n \n <div aria-hidden=\"true\" class=\"unfilled-bubble\"></div>\n \n \n \n \n <div aria-hidden=\"true\" class=\"unfilled-bubble\"></div>\n \n \n \n \n <div aria-hidden=\"true\" class=\"unfilled-bubble\"></div>\n \n \n </div>\n\n </li>\n <li>\n <h4>\n Privacy\n </h4>\n \n \n \n \n\n \n \n \n\n <div class=\"score\" aria-label=\"Rated 5 out of 5\">\n \n \n \n <div aria-hidden=\"true\" class=\"filled-bubble\"></div>\n \n \n \n \n <div aria-hidden=\"true\" class=\"filled-bubble\"></div>\n \n \n \n \n <div aria-hidden=\"true\" class=\"filled-bubble\"></div>\n \n \n \n \n <div aria-hidden=\"true\" class=\"filled-bubble\"></div>\n \n \n \n \n <div aria-hidden=\"true\" class=\"filled-bubble\"></div>\n \n \n </div>\n\n </li>\n <li class=\"divider\" aria-hidden=\"true\"></li>\n <li>\n <h4>Last updated</h4>\n \n \n \n 2025-07-25\n \n \n \n </li>\n \n</ul>\n","model_provider_name":"Alibaba","internet_access":true,"personalizations":true,"shortcut":null,"is_default_profile":false},"metadata":"<li>\n Model\n <svg><use href=\"#icon-qwen\"></use></svg>Qwen3-235B (reasoning)\n</li>\n<li>\n Version\n qwen3-235b-a22b-thinking-2507\n</li>\n<li>\n Speed (tok/s)\n 96\n</li>\n<li>\n Tokens\n 4,836\n</li>\n<li>\n Cost / Total ($)\n 0.006 / 0.006\n</li>\n<li>\n End to end time (s)\n 46.64\n</li>\n\n","documents":[]}]

References