ng-dynamic-autocomplete-searchfield v0.1.0

angular-Dynamic-autocomplete searchField.

Angular creating autoComplete searchField for web applications. Easy to integrate and use.

Getting Started

Features

• Insert the data dynamically.
• you can search the data by any field name .
• you can display the list according to your choice by firstName , LastName etc.
• you can get the data dynamically just by click on that field.
• you can change the highlight color dynamically.
• you can change the placeholder name dynamically.
• you can give the dynamically name when the result not found.

Installation

import { AutocompleteSearchModule } from 'ng-dynamic-autocomplete-searchfield';

// ...

@NgModule({
  imports: [
   AutocompleteSearchModule
    // ...
  ]
  // ...
})
export class AppModule {}

Usage

import { Component } from '@angular/core';

export class AppComponent implements OnInit {
export class AppComponent {
  data: any[];
  searchData: object;
  options: any;


  constructor() {

   this.data = [

      { Id: 4, FirstName: 'Narco', LastName: 'agrawal' },
      { Id: 2, FirstName: 'Bombasto', LastName: 'sharma' },
      { Id: 34, FirstName: 'Celeritas', LastName: 'asdasd' },
      { Id: 44, FirstName: 'Magneta', LastName: 'verma' },
      { Id: 5, FirstName: 'RubberMan', LastName: 'asdasd' },
      { Id: 64, FirstName: 'Dynama', LastName: 'mandoi' },
      { Id: 7, FirstName: 'Dr IQ', LastName: 'mandoi' },
      { Id: 64, FirstName: 'Dynama', LastName: 'agr' },
    ];
	
     this.searchData = {
      'searchBy': ['FirstName', 'LastName'], // this is for the search data by the filed name. 
      'displayBy': ['FirstName', 'LastName'], // this is for  the display the data when searched.
      'placeHolder': 'Firstname LastName',  // this is for the placeHolder of the search field.
      'noRecord': 'no record found', // this is message for for the no record found.
      'highlightColour': 'green'  // this is for giving the highlight color.
      'ishighlight': true // this is for you want highlight or not
    };

	
    this.options = {
      searchData: this.searchData,  // this is for searchData 
      data: this.data   // this is the data of the field
    };
     
  }

//this is for the to get the value of the row 
  receiveRowValue(event) {
    console.log(event);
  }

}  
 
_________________________ _________________________ ________________________________________________________________

Html

<ng-dynamic-autocompleteField [options] = options  (changeEvent)="receiveRowValue($event)"> </ng-dynamic-autocompleteField> 

__________________________________________________________________________________________________________________________________
## Run locally

* Clone the repository or downlod the .zip,.tar files.
* Run `npm install`
* Run `ng serve` for a dev server
* Navigate to `http://localhost:4200/`

## Library Build / NPM Package

Run `yarn build:lib` to build the library and generate an NPM package. The build artifacts will be stored in the dist-lib/ folder.

## Running unit tests

Run `yarn test` to execute the unit tests.

## Development

This project was generated with Angular CLI version 1.7.1.

## Contributions

Contributions are welcome, please open an issue and preferrably file a pull request.

### Opening Issue

Please share sample code using codesandbox.com or stackblitz.com to help me re-produce the issue.

## License

MIT License.