uchleiste, in der nicht eingegebene Ergebnisse ausgeblendet werden
Bisher sind die einzigen Daten, die ich lokal anzeigen / speichern möchte, die Wörter "Apple" und "Car".
Mit anderen Worten, wenn der Benutzer "apple" eingibt, wird in den Ergebnissen das Wort "apple" angezeigt und das Wort "car" ausgeblendet und umgekehrt (derzeit habe ich ein Bild und einen Preis sowie einen Link zu der jeweiligen Gebotsseite item aber ich könnte das als andere frage posten).
Screenshot der Suchleiste, die ich mit lokalen Daten verwenden möchte (funktioniert derzeit nicht):
Screenshot der Beispielsuchleiste (funktioniert):
Link zum vollständigen Projekt (ohne node_modules-Ordner): dropbox.com/s/n2g5tgy2zs7q2l4/SearchBar.zip?dl=
Link to plunker (dies zeigt nur die Suchleiste an, die ich ändern möchte, aber die Demo / Beispiel-Suchleistendateien sind auch in dieser enthalten.)
plnkr.co / edit / eCmNpkKHYdKgnHbXkBvg? p = preview
Der HTML-Code der Suchleiste, die ich ändern möchte (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>
Die Funktion zum Anzeigen der Suchergebnisse:
var data[] = {"Apple, Car"};
SearchBarFunction()
{
//not sure how to display the data
console.log(data);
}
HTML Code des Suchbeispiels, das funktioniert:
<input #term (keyup)="search(term.value)"/>
<ul>
<li *ngFor="#item of items | async">{{item}}</li>
</ul>
Code der Funktion des Beispiels, das funktioniert:
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]);
}
}
Der vollständige HTML-Code von 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
-->
Vollständiger Code von 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; }
}