CODEWITHSUNDEEP
javascriptangular
Harshit
Harshit

Reputation: 1565

Autocomplete not working - Angular2

I'm trying to apply the autocomplete feature in my angular project, but it does not works.

Here code - 

<!-- Start ignoring BootLintBear -->
<form class="navbar-form navbar-left">
<!-- Stop ignoring BootLintBear -->
  <div class="input-group" id="nav-group">
    <input #input type="text" name="query" class="form-control" id="nav-input" (keyup)="onquery($event)"
           [(ngModel)]="searchdata.query">
           <div id="output"></div>
           <script>
             function suggestMe(data) {
               document.getElementById('output').innerHTML = data;
             }
             var storeData = '';
             document.getElementById('nav-input').onkeyup = function() {
               if(storeData!== ''){
                  document.body.removeChild(storeData);
               }
             var textBox = document.getElementById('nav-input').value;
             storeData = document.createElement('script');
             storeData.src = 'http://en.wikipedia.org/w/api.php?action=opensearch&limit=10&format=json&callback=suggestMe&search=' + textBox;
             document.body.appendChild(storeData);
             }; 
            </script>
    <div class="input-group-btn">
      <button class="btn btn-default" id="nav-button" type="submit" (click)="submit()">
        <i class="glyphicon glyphicon-search"></i>
      </button>
    </div>
  </div>
</form>

Suggestions are welcomed : )

Upvotes: 0

Views: 498

Answers (1)

mickdev
mickdev

Reputation: 2885

Instead of mixing pure JavaScript with Typescript, why not do it in full Typescript ? Try this way or adapt it to your need. First set up an observable stream

  data: Observable<any>;
  private searchTerms = new Subject<string>();

  onquery(term: string): void {
    this.searchTerms.next(term);
  }

Next, set up the search feature

  ngOnInit(): void {
    this.data = this.searchTerms
      .debounceTime(300)        // pause in events
      .distinctUntilChanged()   // ignore if search term not changed
      .switchMap(term => term   // switch to new observable each time
        //http service to retrieve your data
        ? this.searchService.search(term)
        : Observable.of<any>([])
      )
      .catch(error => {
        console.log(error);
      });

  }

Template :

<input #input type="text" name="query" class="form-control" id="nav-input" (keyup)="onquery(input.value)">

<div id="output">
   <div *ngFor="let item of (data | async)">{{ item }}</div>
</div>

Upvotes: 4

Related Questions