Question

到目前为止，我想要在本地显示/存储的唯一数据是＆＃34; Apple＆＃34;和＃34; Car。＆＃34;

换句话说，如果用户键入＆＃34; apple＆＃34;，结果将显示单词＆＃34; apple＆＃34;并隐藏“＆＃34; car＆＃34;反之亦然（目前我有一张图片和价格，并链接到与每个项目相关的出价页面，但我可以将其作为一个不同的问题发布）。

我想与本地数据一起使用的搜索栏的屏幕截图（目前无效）：

示例搜索栏（作品）的屏幕截图：

链接到完整项目（没有nodes_modules文件夹）：dropbox.com/s/n2g5tgy2zs7q2l4/SearchBar.zip?dl=0

链接到plunker（这只显示我试图更改的搜索栏，但是演示/示例搜索栏文件也在这个中）

plnkr.co/edit/eCmNpkKHYdKgnHbXkBvg?p=preview

搜索栏的html代码我尝试更改（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>

显示搜索结果的功能：

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

HTML代码搜索示例代码：

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

有效示例函数的代码：

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]);
  }
}

SearchDisplay.component.html的完整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
-->

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; }
}

Answer 1

试试这个：

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

在你的班上：

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

虽然我认为你需要进行ajax调用才能从服务器中获取结果（或者可能是前5名）？如果是这样，你需要使用angular2注入：

...
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;
    }
    ...
}

搜索栏隐藏未输入的结果

1 个答案: