angular4x-auto-complete-multi

Description:

Remote autocomple for andular 4, 5, 6. Setup the url and field names 
of database which value will show in list, Multiple fiels can be set 
by comma separator. The data format of return value of remote url 
should be JSON. After start typing in text fields it will start 
to search in db.It is for multi-select, for single select install 
ng4x-auto-complete

Installation

npm i angular4x-auto-complete-multi --save

Remotre url Data format:

 [{"id":2,"type":"Developer"}, 
  {"id":3,"type":"Angular Developer"},
  {"id":4,"type":"IOS Developer"},
  {"id":5,"type":"Android Developer"}]

Usages:

In your app.module.ts

Include Angular4xAutoCompleteModule
import {Angular4xAutoCompleteModule} from 'angular4x-auto-complete';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
    AppComponent
],
imports: [
    BrowserModule,
    Angular4xAutoCompleteModule,
    HttpClientModule,
    ....
],
providers: [...],
bootstrap: [AppComponent]
})
export class AppModule { }

In your component Html file:

<angula4x-auto-complete #auto></angula4x-auto-complete>

In your component

import {Angula4xAutoCompleteComponent} from 'angular4x-auto-complete'
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  @ViewChild('auto') auto:Angula4xAutoCompleteComponent;
  constructor() {}
  ngOnInit() {
        this.auto.setting({
          data_url:"http://localhost:5200/getData",
          db_fields:"type"
        })
  }
  formSubmit(){
       let row=this.auto.getSelectedRow();
  }
 
}

Functions

setting(): Set remort url and db fields to show text on list. 
Fiels can be multiple by comma separator.

getSelectedRow(): Get selected row from your dataset. 
It will return  {"id":3,"type":"Angular Developer"} from 
 [{"id":2,"type":"Developer"}, 
  {"id":3,"type":"Angular Developer"},
  {"id":4,"type":"IOS Developer"},
  {"id":5,"type":"Android Developer"}] if user select "Angular Developer" 
  from list.

Server side:

It send a 'get' request to server with 'q' query variable with value of text 
field of auto complete. For example: http://localhost:5200/getData?q=d
In node js
usersOP.getData=function(req,res){
   var q=req.query.q
    db.usertype.findAll({where:{type:{$like:q+"%"}}}).then(todo=>{
        res.send(todo);
    });

}

Further Help

Comming soon