Noosphere Possibilities Maximized

    ng4x-auto-complete
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    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
    

    Install

    npm i ng4x-auto-complete

    DownloadsWeekly Downloads

    2

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    147 kB

    Total Files

    24

    Last publish

    Collaborators

    • avatar