7 changed files with 183 additions and 89 deletions
@ -0,0 +1,3 @@
|
||||
<div class="content" [ngStyle]="{'left': left+'px', 'top': top+'px', 'min-width': minWidth+'px'}" *ngIf="searchList.length"> |
||||
<div *ngFor="let item of searchList" (click)="select(item)" class="item">{{item.name}}</div> |
||||
</div> |
@ -0,0 +1,16 @@
|
||||
.content{ |
||||
position: absolute; |
||||
z-index: 1024; |
||||
background-color: #fefefe; |
||||
border: 1px solid #d1d1d1; |
||||
bottom: auto; |
||||
} |
||||
.item { |
||||
white-space: nowrap; |
||||
font-size: 12px; |
||||
cursor: pointer; |
||||
padding: 4px; |
||||
} |
||||
.item:hover { |
||||
background-color: #007aff; |
||||
} |
@ -0,0 +1,37 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import { AutocompleteSelect } from '../map'; |
||||
|
||||
|
||||
|
||||
@Component({ |
||||
selector: 'keDa-Search', |
||||
templateUrl: './keDaSearch.html', |
||||
styleUrls: ['./keDaSearch.scss'] |
||||
}) |
||||
export class KedaSearchComponent { |
||||
|
||||
constructor() { } |
||||
static instance: KedaSearchComponent |
||||
public searchList:AutocompleteSelect[] = []; //list
|
||||
public left:number = 0 |
||||
public top:number = 0 |
||||
public minWidth:number = 0 |
||||
|
||||
ngOnInit(): void { |
||||
KedaSearchComponent.instance = this |
||||
} |
||||
|
||||
// input 添加监听事件
|
||||
addDOMEvent (id:string) { |
||||
let input = document.getElementById(id) |
||||
let DOM = input.getBoundingClientRect() |
||||
this.left = DOM.left |
||||
this.top = DOM.top + DOM.height + 2 |
||||
this.minWidth = DOM.width |
||||
} |
||||
|
||||
select(e) { |
||||
console.log(e) |
||||
} |
||||
|
||||
} |
Loading…
Reference in new issue