Home In ngxTypeahead adding active class to selected option doesn't work correctly for static list. How can i fix that?
Reply: 0

In ngxTypeahead adding active class to selected option doesn't work correctly for static list. How can i fix that?

user1594
1#
user1594 Published in May 21, 2018, 4:46 pm

This is official plunker for ngxTypeahead

http://embed.plnkr.co/gV6kMSRlogjBKnh3JHU3/

In static list

import {Component} from '@angular/core';

@Component({
  selector: 'static-list',
  template: `
  <h3>Using STATIC list</h3>
  <section class="col-sm-12">
    <div class="search-results style-3">
      <input type="text" ngxTypeahead [value]="query3" [taList]="staticList" (taSelected)="handleStaticResultSelected($event)">
    </div>
  </section>
  `
})
export class StaticListComponent {
  public query3 = '';
  public staticList = [
    'guitar',
    'drums',
    'bass',
    'keyboards',
    'mic',
    'trumpet',
    'horns',
    'pedals'
  ];

  public handleStaticResultSelected (result) {
    this.query = result;
  }

}

When we use keyUp or keyDown in the typeahead results, focus is moving properly, but when we reach end of the results, when we click keyDown , focus should come back to first option right? It is not coming. After two keyDowns focus is coming to first option.

How can i correct it?

Is there any simple way or i should loop through the results and add class according to the index?

And i want the typeahead to display from bottom to top because my input box is at the end of the screen. So how can i change the activeResult from bottom. Initially i dont want to highlight any option and if the user clicks keyUp , i want to highlight options from bottom to Top.

Quick answer will be much helpful!!

Thanks in advance!

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.335673 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO