Search bar that hides results that aren't typed into it

So far the only data I want to be displayed/stored locally are the words "Apple" and "Car."

In other words, if the user types in "apple", the results would display the word "apple" and hide the word "car" and vice versa (currently I have a picture and price and link to the bidding page associated with each item but I could post that as a different question).

Screenshot of the search bar I want to use with local data (currently does not work):

Screenshot of example search bar (works):

Link to full project (without nodes_modules folder): dropbox.com/s/n2g5tgy2zs7q2l4/SearchBar.zip?dl=0

Link to plunker (this only displays the search bar I'm trying to change, but the demo/example search bar files are in this one too)

plnkr.co/edit/eCmNpkKHYdKgnHbXkBvg?p=preview

The html code of the search bar I'm trying to change (SearchDisplay.component.html)

    <input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255"       
    value="" style="left: 396px; top: 153px; width: 293px; height: 26px;" />
    <input class="search1" type="submit" name="submition" value="Search" style=" padding-  
    bottom:20px; left: 691px; top: 153px; height: 23px" />
<script type="text/javascript">
    document.getElementById('frmSearch').onsubmit = function() {
        window.location = 'local data here (not sure how to code this)' + document.getElementById('txtSearch').value;
        return false;
    }
</script>

The function to display the results of the search:

  var data[] = {"Apple, Car"};
   SearchBarFunction()
   {
     //not sure how to display the data
     console.log(data);
   }

HTML Code of search example that works:

<input #term (keyup)="search(term.value)"/>
    <ul>
     <li *ngFor="#item of items | async">{{item}}</li>
    </ul>

Code of the function of example that works:

export class WikipediaService {
  constructor(private jsonp: Jsonp) {}
  search (term: string) {
    let wikiUrl = 'http://en.wikipedia.org/w/api.php';
    var params = new URLSearchParams();
params.set('search', term); // the user's search value
    params.set('action', 'opensearch');
    params.set('format', 'json');
    params.set('callback', 'JSONP_CALLBACK');
    // TODO: Add error handling
    return this.jsonp
               .get(wikiUrl, { search: params })
               .map(request => <string[]> request.json()[1]);
  }
}

The full html code of SearchDisplay.component.html:

<html>
    <center>
<h3>Search and Display Page</h3>
</center>
<p>



 </p>



  <form>


<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255"       
value="" style="left: 396px; top: 153px; width: 293px; height: 26px;" />
<input class="search1" type="submit" name="submition" value="Search" style=" padding-  
bottom:20px; left: 691px; top: 153px; height: 23px" />

<script type="text/javascript">
    document.getElementById('frmSearch').onsubmit = function() {
        window.location = 'local data here (not sure how to code this)' + document.getElementById('txtSearch').value;
        return false;
    }
</script>

        <p>



          </p>


  <form>
        <img src="" alt="Apple" style="width:100px;height:100px;">
        <p>
            </p>
        <label for="name">Apple </label>
        <label for="name">Price: $1.00 </label>

        <p>



            </p>
  <div>




      </div>


            <a [routerLink]="['BiddingPage']">Click here to bid on this item.</a>
          <p>



          </p>


  <form>
        <img src="" alt="Apple" style="width:100px;height:100px;">
        <p>
            </p>
        <label for="name">Car </label>
        <label for="name">Price: $23,560.99 </label>

        <p>



            </p>
             <a [routerLink]="['BiddingPage']">Click here to bid on this item.</a>

            <p>




                </p>

      <button>Click here to return to the top.</button>











<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

Full code of SearchDisplay.component.ts

import {Component, OnInit} from 'angular2/core';
import {Router} from 'angular2/router';
import {Hero} from './hero';
import {HeroService} from './hero.service';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HeroesComponent} from './heroes.component';
import {HeroDetailComponent} from './hero-detail.component';
import {DashboardComponent} from './dashboard.component';
import {SpreadSheetComponent} from './spreadsheeteditall.component';
import {SwitchUsersComponent} from './SwitchUsers.component';
import {BiddingPageComponent} from './BiddingPage.component';



@Component({
  selector: 'SearchAndDisplayComponent',
  templateUrl: 'app/SearchDisplay.component.html',
  styleUrls: ['app/SearchDisplay.component.css'],
  providers: [HeroService],
  directives: [ROUTER_DIRECTIVES]
})



export class SearchAndDisplayComponent{
   typeChecker(){
   var priceChecker = document.getElementById('price').nodeValue.valueOf;
   console.log(priceChecker);
   if(isNaN(+priceChecker))
   {
      alert("Entered Price is not a number, please enter a number");
   }
   var data[] = {"Apple, Car"};
   SearchBarFunction()
   {
     //not sure how to display the data
     console.log(data);
   }

   }
   GoToBiddingWebpage()
   {
    //not sure if this code is correct
    return "http://localhost:3000/SearchDisplay/BiddingPage";
   }
/*
retry()
{
  let ticks$ = Observable.interval(5000);
let responses$= XMLHttpRequest.get('somebadconnection.json')
  .retry(3)
  .map(res => res.json());

  let responses =
    ticks$
      .flatMapLatest(() => XMLHttpRequest.get('stock.sjon'))
       .map(res => res.json());

   let stockPoller = responses$.subscribe(res => console.log(res));


responses$.subscrbie(
  res => console.log(res),
  err => console.log('couldnt connect!'));

  stockPoller.unsubscribe();

}
*/
   heroes: Hero[];
  selectedHero: Hero;

  myFunction() {

}


  constructor(private _heroService: HeroService, private _router: Router) { }

  getHeroes() {
    this._heroService.getHeroes().then(heroes => this.heroes = heroes);
  }

  gotoDetail() {
    this._router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
  }

  ngOnInit() {
    this.getHeroes();
  }

  onSelect(hero: Hero) { this.selectedHero = hero; }
}

Answers:

Answer

Try this:

<input class="search1" type="submit" name="submition" value="Search" style=" padding-  
bottom:20px; left: 691px; top: 153px; height: 23px" (click)="clicked()" />

And in your class:

...
clicked() {
     window.location.href = 'local data here (not sure how to code this)' + document.getElementById('txtSearch').value;
     return false;
}
...

Although i would think you need to make an ajax call to grab the results (or maybe top 5) from the server? If so, you'll need to use angular2 injection:

...
import {HTTP_PROVIDERS, Http} from '@angular/http';
...
@Component({
    ...
    providers: [HTTP_PROVIDERS]
    ...
})
export class test {
    ...
    constructor(private http: Http) {}
    ...
    clicked() {
        this.http.get('server address to return a json result', (data) => {
            //do something with data. you probably need to bind to another array property which is bound to the list result.
        });
        return false;
    }
    ...
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.