https://github.com/fssolutions/ng2-combosearch
https://github.com/fssolutions/ng2-combosearch
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/fssolutions/ng2-combosearch
- Owner: fssolutions
- License: mit
- Created: 2016-09-08T17:51:43.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2019-12-17T14:27:10.000Z (over 6 years ago)
- Last Synced: 2024-04-23T18:15:31.969Z (about 2 years ago)
- Language: TypeScript
- Size: 14.6 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/ng2-combosearch)
# ComboSearchComponent
@version 2.0.2
@author: Flávio Silva
@link: [https://github.com/fssolutions/ng2-combosearch](https://github.com/fssolutions/ng2-combosearch)
## Installation
Combosearch runs on angular 2 and is available as an NPM package. You can install ng2-combosearch
in your project's directory as usual:
```bash
$ npm install --save ng2-combosearch
```
Component combo search for Angular 2.
```
]" [(cpModel)]="var [any]" (searchText)="onYourFunction($event)" (selectItem)="onYourFunction($event)">
{{currentItem.Property1}} - {{currentItem.Propery2}}
```
## Example
### Template (.html)
```
{{myVar.Id}} - {{myVar.Name}}({{myVar.User}})
```
### TypeScript (.ts)
Import ComboSearchComponent
```
import { Ng2ComboSearchModule } from 'ng2-combosearch';
```
#### Add in your module
```
@NgModule({
imports: [
Ng2ComboSearchModule,
]
})
```
Create var to bind
```
private nameModelToShow: string;
private modelList: any;
```
Create function to receive data
```
private searchText(value: string){};
private onSelectItem(value: any){};
```
### Complete Code
```
...
import { Ng2ComboSearchModule } from 'ng2-combosearch';
...
@NgModule({
imports: [
Ng2ComboSearchModule,
]
})
...
export class YourClass{
private nameModelToShow: string = "Name";
private modelList: Array = [
{ Id: 1, Name: 'My Name', User: 'my.user', ImgProfile: '11652-589-5-689.png'},
{ Id: 2, Name: 'My Name', User: 'my.user', ImgProfile: '11652-589-5-195.png'}
];
private onSearchText(value: string){
console.info("Searching for: ", value);
// Load new model, when your search on demand;
};
private onSelectItem(value: any){
console.info("Selected Item: ", value);
};
}
```
## Contributing
Contributions are welcome and appreciated. You can find ng2-combosearch on GitHub, feel free to start
an issue or create a pull requests:
[https://github.com/fssolutions/ng2-combosearch](https://github.com/fssolutions/ng2-combosearch)
## License
Copyright (c) 2016 Flávio Silva [fssolutions](http://www.flaviosilva.net).
Licensed under the MIT License (MIT)