ng4x-auto-complete
v1.0.3
Published
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 i
Downloads
8
Maintainers
Readme
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 single select from list, for multiple select
install angular4x-auto-complete-multi
Installation
npm i ng4x-auto-complete --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 Ng4xAutoCompleteModule
import { HttpClientModule } from '@angular/common/http';
import {Ng4xAutoCompleteModule} from 'ng4x-auto-complete';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
Ng4xAutoCompleteModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
In your component Html file:
<ng4x-auto-complete #auto></ng4x-auto-complete>
In your component
import {Ng4xAutoCompleteComponent} from 'ng4x-auto-complete'
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
@ViewChild('auto') auto:Ng4xAutoCompleteComponent;
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 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