Angular 2.0 实现的搜索框

最新推荐文章于 2024-05-30 09:33:14 发布

Miya_Ye

最新推荐文章于 2024-05-30 09:33:14 发布

阅读量814

点赞数

分类专栏： angular2.0 文章标签： angular2.0

本文链接：https://blog.csdn.net/april_4/article/details/52948928

版权

angular2.0 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

样式么。。。抄的bootstrap-table的搜索框

<style>
  .form-control {
    font-family: "Microsoft YaHei", Arial;
    font-size: 12px;
    width: 240px;
    border: 1px solid #dddddd;
    background: #ffffff;
    outline: none;
    box-shadow: none;
    padding: 6px 30px 6px 8px;
  }

  .search {
  height: 30px;
  width: 210px;
  background-color: #f6f6f6;
  border: 1px solid #f0f0f0;
  border-radius: 3px;
  padding-right: 30px;
  font-family: inherit;
  position: relative;
  height: 30px;
  width: 240px;
  float:right;
  margin: 0px;
  }

  .search span {
  position: absolute;
  width: 16px;
  height: 16px;
  top:6px;
  right: 10px;
  background: url("../images/icon_search_mirror.png") no-repeat right 0;
  cursor: pointer;
  }

</style>

<div class="search">
  <input class="form-control" type="text" #term (keyup)="search(term.value)" >
  <span></span>
</div>

然后实现

import { Component, EventEmitter, Input ,Output, OnInit } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Component({
  moduleId: module.id,
  selector: 'search-directive',
  templateUrl:'search-directive.component.html'

})

export class SearchDirectiveComponent implements OnInit {
  @Input() placeholder:string;
  @Output() searchContent = new EventEmitter<Object>();

  searchTermStream = new Subject<string>();


  search(term:string) {
    this.searchTermStream.next(term);
  }

  getSearchStream() {
    let that = this;
    return that.searchTermStream
      .debounceTime(300)
      .distinctUntilChanged();
  }

  ngOnInit() {
    let that = this;

    that.getSearchStream().subscribe((res)=> {
      this.searchContent.emit(res);
    });

  }


}

使用的时候export组件，然后<search-directive (searchContent)="searchContentChange($event)"> </search-directive>

在JS代码中searchContentChange(data)处理用户在输入框输入的数据，默认的延时是300ms，开心~