Barra de pesquisa que oculta resultados que não são digitados nela
Até agora, os únicos dados que quero que sejam exibidos / armazenados localmente são as palavras "Apple" e "Carro".
Em outras palavras, se o usuário digitar "maçã", os resultados exibirão a palavra "maçã" e ocultarão a palavra "carro" e vice-versa (atualmente, tenho uma foto, preço e link para a página de lances associada a cada item mas eu poderia postar isso como uma pergunta diferente).
Captura de tela da barra de pesquisa que desejo usar com dados locais (atualmente não funciona):
Captura de tela da barra de pesquisa de exemplo (funciona):
Link para o projeto completo (sem a pasta nodes_modules): dropbox.com/s/n2g5tgy2zs7q2l4/SearchBar.zip?dl=0
Link para plunker (isso exibe apenas a barra de pesquisa que estou tentando alterar, mas os arquivos da barra de pesquisa de demonstração / exemplo também estão aqui)
plnkr.co/edit/eCmNpkKHYdKgnHbXkBvg?p=preview
O código html da barra de pesquisa que estou tentando alterar (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>
A função para exibir os resultados da pesquisa:
var data[] = {"Apple, Car"};
SearchBarFunction()
{
//not sure how to display the data
console.log(data);
}
Exemplo de código HTML de pesquisa que funciona:
<input #term (keyup)="search(term.value)"/>
<ul>
<li *ngFor="#item of items | async">{{item}}</li>
</ul>
Código da função de exemplo que funciona:
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]);
}
}
O código html completo do 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
-->
Código completo do 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; }
}