Bis jetzt die einzigen Daten, die ich lokal angezeigt/gespeichert werden soll, sind die Wörter "Apple" und "Car." Wenn der Benutzer also "Apfel" eingibt, würde das Wort "Apfel" angezeigt und das Wort "Auto" und umgekehrt (zur Zeit habe ich ein Bild und einen Preis und einen Link zur Gebotsseite) angezeigt mit jedem Artikel verbunden, aber ich könnte dies als eine andere Frage).Suchleiste, die Ergebnisse versteckt, die nicht in sie eingegeben werden
Screenshot der Suchleiste I mit lokalen Daten verwenden möchten (derzeit nicht funktioniert):
Screenshot von Beispiel Suchleiste (Werke):
Link zum vollständigen Projekt (ohne Ordner "nodes_modules"): dropbox.com/s/n2g5tgy2zs7q2l4/SearchBar.zip?dl=0
Link zu Plunker (dies zeigt nur die Suchleiste ich zu ändern bin versucht, aber die Demo/example Suchleiste Dateien sind in diesem einen zu)
plnkr.co/edit/eCmNpkKHYdKgnHbXkBvg?p=preview
der hTML-Code, der die Suchleiste ich versuche (SearchDisplay.component.html) zu
<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 zu ändern, um die Ergebnisse der Suche angezeigt werden:
var data[] = {"Apple, Car"};
SearchBarFunction()
{
//not sure how to display the data
console.log(data);
}
HTML-Code von Such Beispiel, das funktioniert:
<input #term (keyup)="search(term.value)"/>
<ul>
<li *ngFor="#item of items | async">{{item}}</li>
</ul>
-Code der Funktion Beispiel, 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; }
}
fehlen Sie 'this' Schlüsselwort (this.data)? –
@Madhu Ranjan Das wird den Fehler innerhalb der Funktionsdefinition los, aber ich bin mir nicht sicher, wie diese Funktion der Suchschaltfläche zugewiesen wird. – Luna