Custom Autocomplete with Angular
Why Stack Overflow recommends it
Stack Overflow users link it as the starting point for their own Angular autocomplete code, usually when asking how to extend or fix behaviour such as closing on outside click or arrow-key selection.
Recommended by 1 people across 1 different months, 2018 to 2022.
What it is
A 12-minute tutorial that walks through building a custom autocomplete dropdown component in Angular, including a click-outside directive to close the list. The presenter, from the channel Lesson on coding, shares the finished code in a GitHub repository.
What people said
Recommends sdsd · 2021-04 · Stack Overflow · on “How can i prevent opening the window on outside click?”
I wanted to build custom autocomplete. I found this youtube tutorial [this video] The complete solution for this tutorial is here - (You don't need to watch whole 12 minutes video ) [LINK] . So he is using dropdown.directive.ts to detect when the user click outside to close the window under the input import { Directive, ElementRef, Output, EventEmitter, HostListener } from '@angular/core'; @Directive({ selector: '[clickOutside]', }) export class ClickOutsideDirective { @Output() public clickOutside = new EventEmitter(); constructor(private _elementRef: ElementRef) { } @HostListener('document:click', ['$event.target']) public onClick(targetElement) { const isClickedInside = this._elementRef.native
Cites thedoseoftea · 2018-08 · Stack Overflow · on “Setting focus on dropdown autocomplete option by arrow keys in Angular”
I was unable to achieve my goal of picking options in an angular autocomplete dropdown that I created using this tutorial [this video] . This is what the component looks like now: Dropdown with focus on hover [LINK] The dropdown options can be picked by clicking on them and they end up on the input field. I would also like to be able to pick the options by arrow keys, but am unable to do it. My code looks like this: autocomplete-select.component.html <div class="form-group row" clickOutside (clickOutside)="closeAllocationDropDown()" class="pos-rel"> <input class="form-control" type="text" id="allocation" placeholder="Zadajte časový záznam" formControlName="allocation" (click)="toggleAllocationDro
Cites Tom Price · 2019-08 · Stack Overflow · on “Is there a shim or polyfill that addresses Chrome's 512 limitation on datalists?”
Implemented a typeahead using an input tag tied to a datalist. Chrome does not display any entries beyond the 512th match when the user scrolls through them. Entire datalist only contains about 950 entries. Testing with Chrome for Windows, Version 76.0.3809.100 (Official Build) (64-bit). Firefox and IE/Edge (with the Franzke polyfill) work correctly. Is there a browser shim or polyfill that addresses this limitation? Application previously had a select tag which limited matches to the beginning of each option. [this video] was reported by another team member to work unacceptably with special characters. Reported as a bug to Google. [LINK] <html> <head></head> <body> <input type="text" list="licen
Cites Nate Anderson · 2022-12 · Stack Overflow · on “Limit total entries displayed by datalist”
This is not an answer to the original question (where the developer wants to limit the items shown in the datalist) However I arrived at this question because I was concerned about a different limitation (where the developers does not want to limit the items shown in the datalist; but the browser has a limit ( Chrome has a limit of 512 [LINK] ; only shows up to 512 options at a time) This JSFiddle [LINK] demonstrates the problem; see screenshot below. Of course, as the user begins typing in the input (which filters the options shown in the datalist), there may be fewer than 512 results, so this browser-limitation would not be noticeable . But if your user expects to see every single option i