Implementing autocomplete

Question

I am having trouble finding a good autocomplete component for Angular2  Just anything that I can pass a list of key-label objects to and have a nice autocomplete on an input field   Kendo does not support Angular 2 yet and that it what we mostly use internally   It doesn t appear that Angular Material supports Angular 2 yet either   Can anyone please point me in the right direction or let me know what they are using   This is what I built so far   It s pretty bad and I d like to find something that looks nice   import  Component  EventEmitter  Input  Output  from  angular2 core   import  Control  from  angular2 common   import  Observable  from  rxjs Observable   import  SimpleKeyValue  from     models simple-key-value  import  rxjs add operator map   import  rxjs add operator debounceTime   import  rxjs add operator distinctUntilChanged     Component   selector   general-typeahead   template     lt div gt               lt div class  input-group  gt               lt input type  text   ngFormControl     term  class  form-control  placeholder   placeHolder    gt               lt  div gt               lt ul gt                   lt li class  item   ngFor   item of matchingItems   click   selectItem item   gt                        item value                    lt  li gt               lt  ul gt                 lt  div gt       export class GeneralTypeahead      matchingItems  Array lt SimpleKeyValue gt     term   new Control        Input   allItems  Array lt SimpleKeyValue gt      Input   placeHolder  string     Output   onSelectItem   new EventEmitter lt SimpleKeyValue gt        constructor         this term valueChanges          distinctUntilChanged            debounceTime 200           subscribe  term   string    gt  this matchingItems   this allItems filter sl   gt  sl value toLowerCase   indexOf term toLowerCase     gt  -1           selectItem sl  SimpleKeyValue        this onSelectItem emit sl

User · Answer

PrimeNG has a native AutoComplete component with advanced features like templating and multiple selection    http   www primefaces org primeng   autocomplete

User · Answer

I ve built a fairly simple  reusable and functional Angular2 autocomplete component based on some of the ideas in this answer other tutorials around on this subject and others  It s by no means comprehensive but may be helpful if you decide to build your own   The component   import   Component  Input  Output  OnInit  ContentChild  EventEmitter  HostListener   from   angular core   import   Observable   from  rxjs Observable   import   AutoCompleteRefDirective   from    autocomplete directive     Component       selector   autocomplete       template     lt ng-content gt  lt  ng-content gt   lt div class  autocomplete-wrapper   click   clickedInside  event   gt       lt div class  list-group autocomplete   ngIf  results  gt           lt a  routerLink     class  list-group-item   click   selectResult result    ngFor  let result of results  let i   index   innerHTML   dataMapping result    highlight  query   ngClass     active   i    selectedIndex   gt  lt  a gt       lt  div gt   lt  div gt             styleUrls      autocomplete component css      export class AutoCompleteComponent implements OnInit         ContentChild AutoCompleteRefDirective      public input  AutoCompleteRefDirective        Input   data   searchTerm  string    gt  Observable lt any   gt        Input   dataMapping   obj  any    gt  string       Output   onChange   new EventEmitter lt any gt           HostListener  document click      event        clickedOutside  event  any   void           this clearResults               public results  any        public query  string      public selectedIndex  number   0      private searchCounter  number   0       ngOnInit    void           this input change              subscribe  query  string    gt                    this query   query                  this onChange emit                    this searchCounter                    let counter   this searchCounter                   if  query                        this data query                           subscribe data   gt                                if  counter    this searchCounter                                    this results   data                                  this input hasResults   data length  gt  0                                  this selectedIndex   0                                                                                              else this clearResults                             this input cancel              subscribe      gt                    this clearResults                             this input select              subscribe      gt                    if  this results  amp  amp  this results length  gt  0                                        this selectResult this results this selectedIndex                                               this input up              subscribe      gt                    if  this results  amp  amp  this selectedIndex  gt  0  this selectedIndex--                           this input down              subscribe      gt                    if  this results  amp  amp  this selectedIndex   1  lt  this results length  this selectedIndex                               selectResult result  any   void           this onChange emit result           this clearResults               clickedInside  event  any   void            event preventDefault             event stopPropagation               private clearResults    void           this results               this selectedIndex   0          this searchCounter   0          this input hasResults   false            The component CSS    autocomplete-wrapper       position  relative      autocomplete       position  absolute      z-index  100      width  100       The directive   import   Directive  Input  Output  HostListener  EventEmitter   from   angular core     Directive       selector    autocompleteRef      export class AutoCompleteRefDirective        Input   hasResults  boolean   false       Output   change   new EventEmitter lt string gt          Output   cancel   new EventEmitter         Output   select   new EventEmitter         Output   up   new EventEmitter         Output   down   new EventEmitter          HostListener  input      event        oninput event  any            this change emit event target value               HostListener  keydown      event        onkeydown event  any                switch  event keyCode                case 27                  this cancel emit                    return false              case 13                  var hasResults   this hasResults                  this select emit                    return  hasResults              case 38                  this up emit                    return false              case 40                  this down emit                    return false              default                      The highlight pipe   import   Pipe  PipeTransform   from   angular core     Pipe       name   highlight      export class HighlightPipe implements PipeTransform       transform value  string  args  any   any           var re   new RegExp args   gi             return value replace re  function  match                return   lt strong gt     match     lt  strong gt                          The implementation   import   Component   from   angular core   import   Observable   from  rxjs Observable   import   Subscriber   from  rxjs Subscriber     Component       selector   home       template     lt autocomplete  data   getData   dataMapping   dataMapping   onChange   change  event   gt       lt input type  text  class  form-control  name  AutoComplete  placeholder  Search     autocomplete  off  autocompleteRef   gt   lt  autocomplete gt           export class HomeComponent        getData    query  string    gt  this search query           The dataMapping property controls the mapping of an object returned via getData         to a string that can be displayed to the use as an option to select      dataMapping    obj  any    gt  obj          This function is called any time a change is made in the autocomplete         When the text is changed manually  no object is passed         When a selection is made the object is passed      change obj  any   void           if  obj                   You can do pretty much anything here as the entire object is passed if it s been selected                 Navigate to another page  update a model etc              alert obj                        private searchData     one    two    three    four    five    six    seven    eight    nine    ten            This function mimics an Observable http service call         In reality it s probably calling your API  but today it s looking at mock static data      private search query  string   Observable lt any gt                return new Observable lt any gt   subscriber  Subscriber lt any gt     gt  subscriber              next                 map o   gt  this searchData filter d   gt  d indexOf query   gt  -1

User · Answer

I think you can use typeahead js  There are typescript definitions for it  so it ll be easy to use it i guess if you are using typescript for development

User · Answer

Update  This answer has led to the development of ng2-completer an Angular2 autocomplete component  This is the list of existing autocomplete components for Angular2    ng2-completer  ng2-auto-complete ng2-typeahead   Credit goes to  dan-cancro for coming up with the idea  Keeping the original answer for those who wish to create their own directive    To display autocomplete list we first need an attribute directive that will return the list of suggestions based on the input text and then display them in a dropdown  The directive has 2 options to display the list    Obtain a reference to the nativeElement and manipulate the DOM directly Dynamically load a list component using DynamicComponentLoader   It looks to me that 2nd way is a better choice as it uses angular 2 core mechanisms instead of bypassing them by working directly with the DOM and therefore I ll use this method   This is the directive code    use strict   import  Directive  DynamicComponentLoader  Input  ComponentRef  Output  EventEmitter  OnInit  ViewContainerRef  from   angular core   import  Promise  from  es6-promise   import  AutocompleteList  from    autocomplete-list     Directive       selector    ng2-autocomplete       The attribute for the template that uses this directive     host              keyup     onKey  event      Liten to keyup events on the host component          export class AutocompleteDirective implements OnInit          The search function should be passed as an input      Input  ng2-autocomplete   public search   term  string    gt  Promise lt Array lt   text  string  data  any   gt  gt          The directive emits ng2AutocompleteOnSelect event when an item from the list is selected      Output  ng2AutocompleteOnSelect   public selected   new EventEmitter         private term           private listCmp  ComponentRef lt AutocompleteList gt    undefined      private refreshTimer  any   undefined      private searchInProgress   false      private searchRequired   false       constructor  private viewRef  ViewContainerRef  private dcl  DynamicComponentLoader                     On key event is triggered when a key is released on the host component        the event starts a timer to prevent concurrent requests             public onKey event  any            if   this refreshTimer                this refreshTimer   setTimeout                   gt                    if   this searchInProgress                        this doSearch                      else                          If a request is in progress mark that a new search is required                     this searchRequired   true                                               200                     this term   event target value          if  this term         amp  amp  this listCmp                   clean the list if the search term is empty             this removeList                         public ngOnInit                When an item is selected remove the list         this selected subscribe      gt                this removeList                                      Call the search function and handle the results             private doSearch             this refreshTimer   undefined             if we have a search function and a valid search term call the search         if  this search  amp  amp  this term                       this searchInProgress   true              this search this term               then  res    gt                    this searchInProgress   false                     if the term has changed during our search do another search                 if  this searchRequired                        this searchRequired   false                      this doSearch                      else                          display the list of results                     this displayList res                                                 catch err   gt                    console log  search error    err                   this removeList                                                    Display the list of results        Dynamically load the list component if it doesn t exist yet and update the suggestions list             private displayList list  Array lt   text  string  data  any   gt             if   this listCmp                this dcl loadNextToLocation AutocompleteList  this viewRef               then cmp   gt                       The component is loaded                 this listCmp   cmp                  this updateList list                      Emit the selectd event when the component fires its selected event                   lt AutocompleteList gt  this listCmp instance   selected                      subscribe selectedItem   gt                         this selected emit selectedItem                                                 else               this updateList list                                   Update the suggestions list in the list component             private updateList list  Array lt   text  string  data  any   gt             if  this listCmp                  lt AutocompleteList gt  this listCmp instance   list   list                                  remove the list component             private removeList             this searchInProgress   false          this searchRequired   false          if  this listCmp                this listCmp destroy                this listCmp   undefined                      The directive dynamically loads a dropdown component  this is a sample of such a component using bootstrap 4    use strict   import  Component  Output  EventEmitter  from   angular core     Component       selector   autocomplete-list       template    lt div class  dropdown-menu  search-results  gt                       lt a  ngFor  let item of list  class  dropdown-item   click   onClick item   gt   item text   lt  a gt                  lt  div gt       Use a bootstrap 4 dropdown-menu to display the list     styles     search-results   position  relative  right  0  display  block  padding  0  overflow  hidden  font-size   9rem        export class AutocompleteList           Emit a selected event when an item in the list is selected      Output   public selected   new EventEmitter         public list                  Listen for a click event on the list             public onClick item   text  string  data  any             this selected emit item             To use the directive in another component you need to import the directive   include it in the components directives and provide it with a search function and event handler for the selection     use strict   import  Component  from   angular core    import  AutocompleteDirective  from     component ng2-autocomplete autocomplete     Component       selector   my-cmp       directives   AutocompleteDirective       template    lt input class  form-control  type  text   ng2-autocomplete   search     ng2AutocompleteOnSelect   onItemSelected  event   autocomplete  off  gt      export class MyComponent                    generate a search function that returns a Promise that resolves to array of text and optionally additional data               public search             return  filter  string   Promise lt Array lt   text  string  data  any   gt  gt    gt                   do the search             resolve  text   one item   data  null                                     handle item selection               public onItemSelected selected    text  string  data  any              console log  selected     selected text             Update  code compatible with angular2 rc 1

User · Answer

I d like to add something that no one has yet mentioned  ng2-input-autocomplete  NPM  https   www npmjs com package ng2-input-autocomplete  GitHub  https   github com liuy97 ng2-input-autocomplete readme

User · Answer

I have created a module for anuglar2 autocomplete  In this module you can use array  or url  npm link   ang2-autocomplete

User · Answer

I know you already have several answers  but I was on a similar situation where my team didn t want to depend on a heavy libraries or anything related to bootstrap since we are using material so I made our own autocomplete control  using material-like styles  you can use my autocomplete or at least you can give a look to give you some guiadance  there was not much documentation on simple examples on how to upload your components to be shared on NPM

[angular] Implementing autocomplete

Examples related to angular

Examples related to angular2-template

Examples related to angular2-directives