Angular 2.0 实现的搜索框

来源：互联网发布：linux我的世界启动器编辑：程序博客网时间：2024/06/05 02:05

样式么。。。抄的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，开心~

0 0