title: Angular2: How do you pass a selected item from a HTML datalist element back to the component?
body: <p>I have simple component which includes a  to dreate a drop-down box. This is list is filled with the results from a Web API call. For display purposes I only use two fields of the item. However, once an element has been selected I need to do stuff with all the other fields. How do I pass the entire element back to the component?</p>
  
  <p>Really would appreciate any help.</p>
  
  <pre><code>&lt;h1&gt;Get Locations&lt;/h1&gt;
  &lt;div&gt;
      &lt;div&gt;
          &lt;input list="browsers" name="browser" #term (keyup)="search(term.value)"&gt;
          &lt;datalist id="browsers"&gt;
              &lt;option *ngFor="let item of items | async" &gt;
                  {{item.code + " " + item.description}}
              &lt;/option&gt;
          &lt;/datalist&gt;
      &lt;/div&gt;
      &lt;input type="submit" value="Click" (click)="onSelect(item)" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The component code is as follows:</p>
  
  <pre><code>import { Component, OnInit }        from '@angular/core';
  import { Observable }       from 'rxjs/Observable';
  import { Subject }          from 'rxjs/Subject';
  import { LocationService } from './location.service';
  import {Location} from './location.component';
  import './rxjs-operators';
  
  @Component({
      selector: 'lesson-08',
      templateUrl: './views/lesson08.html',
      providers: [LocationService]
  })
  export class Lesson08 implements OnInit{
  
      constructor(private locationService: LocationService) { }
  
      aLoc: Location;
  
      ngOnInit() {
          this.aLoc = new Location();
      }
  
      errorMessage: string;
      locations: Location[];
      mode = 'Observable';
      displayValue: string;
  
      private searchTermStream = new Subject&lt;string&gt;();
  
      search(term: string) {
          this.searchTermStream.next(term);
      }
  
      onSelect(item: Location) {
          // do stuff with this location
  
      }
  
      items: Observable&lt;Location[]&gt; = this.searchTermStream
          .debounceTime(300)
          .distinctUntilChanged()
          .switchMap((term: string) =&gt; this.locationService.search(term));
      }
  </code></pre>