state,city and pincode searchable dropdown

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/edit-pd-master/edit-pd-master.component.ts

@@ -707,7 +707,11 @@ if(!option){
                 "other_pincode":filteredAddressesdata[0].other_pincode,
                 "remarks": my_array.remarks,
               }
-
+            // console.log('my console',my_array.addresses);
+            delete my_array.addresses[0].stateSearch;
+            delete my_array.addresses[0].citySearch;
+            delete my_array.addresses[0].pinSearch;
+            // console.log(my_array.addresses,typeof(my_array));
             this.disableAfterSubmit = true;
             console.log('this.masterRandomString',this.masterRandomString);
             this._pd.editPdMasterDetails(lenderMasterArray, updateStatus,this.masterRandomString).subscribe(result => {

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html

@@ -50,7 +50,11 @@
                                                         <mat-form-field style="width: 32%">
                                                             <mat-select placeholder="State" formControlName="state"
                                                                 (selectionChange)="getCityAndPincodeDetails($event.value,i,1)">
-                                                                <mat-option>Select</mat-option>
+                                                                <mat-option>
+                                                                        <ngx-mat-select-search formControlName="stateSearch" (keyup)="searchFun(init_addr,i,'state')"
+                                                                        [placeholderLabel]="'Search State...'" 
+                                                                        [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                                                      </mat-option>
                                                                 <mat-option *ngFor="let SL of stateData"
                                                                     [value]="SL.state_id">{{SL.name}}</mat-option>
                                                             </mat-select>
@@ -58,7 +62,11 @@
 
                                                         <mat-form-field style="width: 32%">
                                                             <mat-select placeholder="City" formControlName="city">
-                                                                <mat-option> Select </mat-option>
+                                                                    <mat-option>
+                                                                            <ngx-mat-select-search formControlName="citySearch" (keyup)="searchFun(init_addr,i,'city','1')"
+                                                                            [placeholderLabel]="'Search City...'" 
+                                                                            [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                                                          </mat-option>
                                                                 <mat-option *ngFor="let CL of cityData"
                                                                     [value]="CL.city_id">{{CL.city_name}}</mat-option>
                                                             </mat-select>
@@ -66,7 +74,11 @@
 
                                                         <mat-form-field style="width: 24%">
                                                             <mat-select placeholder="Pincode" formControlName="pincode" (selectionChange)="setOthers($event.value,i,1)">
-                                                                <mat-option>Select</mat-option>
+                                                                    <mat-option>
+                                                                            <ngx-mat-select-search formControlName="pinSearch" (keyup)="searchFun(init_addr,i,'pin','1')"
+                                                                            [placeholderLabel]="'Search Pincode...'" 
+                                                                            [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                                                          </mat-option>
                                                                 <mat-option *ngFor="let PL of pincodeData"
                                                                     [value]="PL.pincode_id">{{PL.pincode}}</mat-option>
                                                             </mat-select>
@@ -128,7 +140,11 @@
                                                                 <mat-select placeholder="State"
                                                                     formControlName="alternative_state"
                                                                     (selectionChange)="getCityAndPincodeDetails($event.value,a,2)">
-                                                                    <mat-option>Select</mat-option>
+                                                                    <mat-option>
+                                                                            <ngx-mat-select-search formControlName="stateSearch" (keyup)="searchFun(alter_addr,i,'state')"
+                                                                            [placeholderLabel]="'Search State...'" 
+                                                                            [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                                                          </mat-option>
                                                                     <mat-option *ngFor="let SL of stateData"
                                                                         [value]="SL.state_id">{{SL.name}}</mat-option>
                                                                 </mat-select>
@@ -137,7 +153,11 @@
                                                             <mat-form-field style="width: 32%">
                                                                 <mat-select placeholder="City"
                                                                     formControlName="alternative_city">
-                                                                    <mat-option> Select </mat-option>
+                                                                    <mat-option>
+                                                                            <ngx-mat-select-search formControlName="citySearch" (keyup)="searchFun(alter_addr,i,'city','2')"
+                                                                            [placeholderLabel]="'Search City...'" 
+                                                                            [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                                                          </mat-option>
                                                                     <mat-option *ngFor="let CL of alertnativeCityData"
                                                                         [value]="CL.city_id">{{CL.city_name}}
                                                                     </mat-option>
@@ -147,7 +167,11 @@
                                                             <mat-form-field style="width: 24%">
                                                                 <mat-select placeholder="Pincode"
                                                                     formControlName="alternative_pincode" (selectionChange)="setOthers($event.value,a,2)">
-                                                                    <mat-option>Select</mat-option>
+                                                                    <mat-option>
+                                                                            <ngx-mat-select-search formControlName="pinSearch" (keyup)="searchFun(alter_addr,i,'pin','2')"
+                                                                            [placeholderLabel]="'Search Pincode...'" 
+                                                                            [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                                                          </mat-option>
                                                                     <mat-option
                                                                         *ngFor="let PL of alertnativePincodeData"
                                                                         [value]="PL.pincode_id">{{PL.pincode}}

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts

@@ -14,6 +14,8 @@ import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 import { TitleCasePipe } from '@angular/common';
 
 import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 @Component({
     selector: 'app-address',
@@ -64,6 +66,12 @@ export class AddressComponent implements OnInit {
     lender_short_name: any;
     image_doc_params: { pdid: number; form_id: number; company_id: string; };
     
+     /**Declaration of search dropdown */
+     protected _onDestroy = new Subject<void>();
+     stateDataList: any = [];
+     cityDataList: any = [];
+     pincodeDataList: any = [];
+
     /**Constructor of the class */
     constructor(private el: ElementRef, notifier: NotifierService,
         private fb: FormBuilder,
@@ -229,6 +237,9 @@ export class AddressComponent implements OnInit {
         if (AddressDetails != null) {
             return this.fb.group({
                 address: [this.transformName(AddressDetails.address), Validators.compose([Validators.required])],
+                stateSearch: [''],
+                citySearch: [''],
+                pinSearch: [''],
                 state: [AddressDetails.state],
                 city: [AddressDetails.city],
                 pincode: [AddressDetails.pincode],/** ,Validators.compose([Validators.minLength(6),Validators.maxLength(6)]) */
@@ -241,6 +252,9 @@ export class AddressComponent implements OnInit {
                 state: [''],
                 city: [''],
                 pincode: [''],
+                stateSearch: [''],
+                citySearch: [''],
+                pinSearch: [''],
                 pincode_others: ['', Validators.compose([Validators.minLength(6), Validators.maxLength(6)])],
             });
         }
@@ -254,6 +268,8 @@ export class AddressComponent implements OnInit {
                 alternative_state: [AddressDetails.alternative_state],
                 alternative_city: [AddressDetails.alternative_city],
                 alternative_pincode: [AddressDetails.alternative_pincode],
+                stateSearch:[''],
+                citySearch:[''],
                 alternative_pincode_others: [AddressDetails.alternative_pincode_others, Validators.compose([Validators.minLength(6), Validators.maxLength(6)])],
                 reason_for_alternative_address: [AddressDetails.reason_for_alternative_address, Validators.compose([Validators.required])],
             });
@@ -265,6 +281,9 @@ export class AddressComponent implements OnInit {
                 alternative_state: [''],
                 alternative_city: [''],
                 alternative_pincode: [''],
+                stateSearch:[''],
+                citySearch:[''],
+                pinSearch:[''],
                 alternative_pincode_others:['', Validators.compose([Validators.minLength(6), Validators.maxLength(6)])],
                 reason_for_alternative_address: ['', Validators.compose([Validators.required])],
             });
@@ -302,6 +321,7 @@ export class AddressComponent implements OnInit {
                 }
                 else if (type == 6 && val.isactive == 1) {
                     this.stateData.push(val);
+                    this.stateDataList = this.stateData;
                 }
             })
         });
@@ -317,9 +337,13 @@ export class AddressComponent implements OnInit {
                 if (flag == 1) {
                     this.cityData = data.records.cities;
                     this.pincodeData = data.records.pincode;
+                    this.cityDataList = this.cityData;
+                    this.pincodeDataList = this.pincodeData;
                 } else if (flag == 2) {
                     this.alertnativeCityData = data.records.cities;
                     this.alertnativePincodeData = data.records.pincode;
+                    this.cityDataList = this.alertnativeCityData;
+                    this.pincodeDataList = this.alertnativePincodeData;
                 }
             }
         });
@@ -829,5 +853,130 @@ export class AddressComponent implements OnInit {
     //         }
     //     });
     // }
+    searchFun(control:any,i:number,option,flag){
+        console.log("control",control)
+            if (option == 'state') {
+              console.log("state")
+              control.controls['stateSearch'].valueChanges
+                .pipe(takeUntil(this._onDestroy))
+                .subscribe(()=>{
+                  this.searchState(control.controls['stateSearch'].value)
+                })
+            }
+            if (option == 'city') {
+                // this.cityData[i]=this.filterCity(this.stateList,control.value.state_name)
+               control.controls['citySearch'].valueChanges
+                 .pipe(takeUntil(this._onDestroy))
+                 .subscribe(() => {
+                   this.SearchCity(control.controls['citySearch'].value, i,flag);
+                 })
+             } 
+             if (option == 'pin') {
+               console.log("pin")
+               control.controls['pinSearch'].valueChanges
+                 .pipe(takeUntil(this._onDestroy))
+                 .subscribe(()=>{
+                   this.searchPin(control.controls['pinSearch'].value,i,flag)
+                 })
+             }
+          }
 
+          searchPin(val:any,index:number, flag){
+            if (flag == 1) { 
+                if(!this.pincodeData){
+                    return
+                  }
+                  let searchValue=val
+                  if(!searchValue){
+                    this.pincodeData=this.pincodeDataList.slice()
+                    return
+                  }else{
+                    searchValue=searchValue.toLowerCase()
+                  }
+                  this.pincodeData=this.pincodeDataList.filter(value=>value.pincode.toLowerCase().indexOf(searchValue) > -1)
+
+            } else if (flag == 2) { 
+                if(!this.alertnativePincodeData){
+                    return
+                  }
+                  let searchValue=val
+                  if(!searchValue){
+                    this.alertnativePincodeData=this.pincodeDataList.slice()
+                    return
+                  }else{
+                    searchValue=searchValue.toLowerCase()
+                  }
+                  this.alertnativePincodeData=this.pincodeDataList.filter(value=>value.pincode.toLowerCase().indexOf(searchValue) > -1)
+
+            }
+            
+          }
+          
+          SearchCity(val: any, i: number, flag) {
+                if (flag == 1) {
+                    // let cityData=
+             console.log(this.cityDataList)
+             if (!this.cityDataList) {
+               return
+             }
+             let searchValue = val
+             if (!searchValue) {
+              this.cityData=this.cityDataList.slice()
+               return
+             } else {
+               searchValue = searchValue.toLowerCase()
+             }
+             this.cityData=
+                 this.cityDataList.filter(val=>val.city_name.toLowerCase().indexOf(searchValue)> -1)
+             
+             console.log("City Data value",this.cityData)
+             // this.filteredCity.next(
+             //   this.cityDataList[i].filter(value => value.city_name.toLowerCase().indexOf(searchValue) > -1)
+             // )
+                     
+                } else if (flag == 2) {
+                    // let cityData=
+             console.log(this.cityDataList)
+             if (!this.cityDataList) {
+               return
+             }
+             let searchValue = val
+             if (!searchValue) {
+              this.alertnativeCityData=this.cityDataList.slice()
+               return
+             } else {
+               searchValue = searchValue.toLowerCase()
+             }
+             this.alertnativeCityData=
+                 this.cityDataList.filter(val=>val.city_name.toLowerCase().indexOf(searchValue)> -1)
+             
+             console.log("City Data value",this.alertnativeCityData)
+             // this.filteredCity.next(
+             //   this.cityDataList[i].filter(value => value.city_name.toLowerCase().indexOf(searchValue) > -1)
+             // )
+                  
+                } 
+             
+        
+          }
+
+    searchState(val: any) {
+        console.log("statedata")
+        if (!this.stateDataList) {
+          return
+        }
+        let searchVal = val
+        if (!searchVal) {
+         // this.filteredState.next(this.stateList.slice())
+         this.stateData=this.stateDataList.slice()
+          return
+        }
+        else {
+          searchVal = searchVal.toLowerCase()
+        }
+        this.stateData=this.stateDataList.filter(res => res.name.toLowerCase().indexOf(searchVal) > -1)
+        // this.filteredState.next(
+        //   this.stateList.filter(res => res.state_name.toLowerCase().indexOf(searchVal) > -1)
+        // )
+      }
 }

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.html

@@ -363,7 +363,11 @@
                                                                 {{manufacturing.value.main_products}}</mat-label>
                                                             <!-- <input matInput placeholder="Countries Where The Export Is Being Done" formControlName="country_name" > -->
                                                             <mat-select placeholder="Countries" formControlName="country_name">
-                                                                <mat-option>Select</mat-option>
+                                                                <mat-option>
+                                                                    <ngx-mat-select-search formControlName="countrySearch" (keyup)="searchFun(countryList,i,'country')"
+                                                                    [placeholderLabel]="'Search Countries...'" 
+                                                                    [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                                                  </mat-option>
                                                                 <mat-option *ngFor="let CL of countryDataList" [value]="CL.country_id">
                                                                     {{CL.country_name}}
                                                                 </mat-option>
@@ -653,6 +657,11 @@
                                                             <!-- <input matInput placeholder="Countries Where The Export Is Being Done" formControlName="country_name" > -->
                                                             <mat-select placeholder="Countries Where The Export Is Being Done"
                                                                 formControlName="country_name">
+                                                                <mat-option>
+                                                                    <ngx-mat-select-search formControlName="countrySearch" (keyup)="searchFun(countryList,i,'country')"
+                                                                    [placeholderLabel]="'Search Countries...'" 
+                                                                    [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                                                  </mat-option>
                                                                 <mat-option *ngFor="let CL of countryDataList" [value]="CL.country_id">
                                                                     {{CL.country_name}}
                                                                 </mat-option>
@@ -944,6 +953,11 @@
                                                             <mat-label>Countries Where The Export Is Being Done for
                                                                 {{wholesale.value.main_products}}</mat-label>
                                                             <mat-select placeholder="Countries" formControlName="country_name">
+                                                                    <mat-option>
+                                                                            <ngx-mat-select-search formControlName="countrySearch" (keyup)="searchFun(countryList,i,'country')"
+                                                                            [placeholderLabel]="'Search Countries...'" 
+                                                                            [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                                                          </mat-option>
                                                                 <mat-option *ngFor="let CL of countryDataList" [value]="CL.country_id">
                                                                     {{CL.country_name}}
                                                                 </mat-option>
@@ -1233,6 +1247,11 @@
                                                             <mat-label>Countries Where The Export Is Being Done for
                                                                 {{serviceprovider.value.main_products}}</mat-label>
                                                             <mat-select placeholder="Countries" formControlName="country_name">
+                                                                    <mat-option>
+                                                                            <ngx-mat-select-search formControlName="countrySearch" (keyup)="searchFun(countryList,i,'country')"
+                                                                            [placeholderLabel]="'Search Countries...'" 
+                                                                            [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                                                          </mat-option>
                                                                 <mat-option *ngFor="let CL of countryDataList" [value]="CL.country_id">
                                                                     {{CL.country_name}}
                                                                 </mat-option>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.ts

@@ -28,6 +28,8 @@ import { DatePipe } from '@angular/common';
 /**sweet alert */
 import Swal from 'sweetalert2';
 import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 @Component({
     selector: 'app-business-info',
     templateUrl: './business-info.component.html',
@@ -80,6 +82,11 @@ export class BusinessInfoComponent implements OnInit {
     generalExistBusinessYear: Number;
     generalExistBusinessMonth: Number;
 
+     /**Declaration of search dropdown */
+   protected _onDestroy = new Subject<void>();
+   countryData: any = [];
+    
+
     //Declaration FOr Validation
     yearErrorMessage: any = [];
     monthErrorMessage: any = [];
@@ -97,6 +104,7 @@ export class BusinessInfoComponent implements OnInit {
     image_doc_params: { pdid: number; form_id: number; company_id: String; };
     @ViewChild('business_activity_type') business_activity_type_scroll : ElementRef
     
+
     constructor(notifier: NotifierService,
         private fb: FormBuilder,
         private route: ActivatedRoute,
@@ -1033,7 +1041,8 @@ export class BusinessInfoComponent implements OnInit {
     createCountrySale() {
         return this.fb.group({
             country_name: ['', Validators.compose([Validators.required])],
-            approx_sale: ['', Validators.compose([Validators.required])]
+            approx_sale: ['', Validators.compose([Validators.required])],
+            countrySearch: ['']
         });
     }
     // add more dtate for manufacturing
@@ -1296,6 +1305,7 @@ export class BusinessInfoComponent implements OnInit {
             data.records.forEach(val => {
                 if (val.isactive == 1) {
                     this.countryDataList.push(val);
+                    this.countryData = this.countryDataList;
                 }
             })
         });
@@ -1409,8 +1419,14 @@ export class BusinessInfoComponent implements OnInit {
     // Out of Total Export Sales what % of Sales is done in Albania?
     getPlaceHolderName(id) {
         let name = this.countryDataList.filter(value => value.country_id == id);
-
+        if(name.length>0){
             return 'Out of Total Export Sales what % of Sales is done in ' + name[0].country_name + ' ?';
+        }
+        else{
+            return 
+        }
+
+        
         // return name[0].country_name +'?';
     }
     // get work experience based on create form control
@@ -2047,4 +2063,39 @@ export class BusinessInfoComponent implements OnInit {
           }
       });
     } */ 
+
+    searchFun(control:any,i:number,option){
+        console.log("control",control)
+             
+            if (option == 'country') {
+              console.log("country")
+              control.controls['countrySearch'].valueChanges
+                .pipe(takeUntil(this._onDestroy))
+                .subscribe(()=>{
+                  this.searchcountry(control.controls['countrySearch'].value)
+                })
+            }
+             
+          }
+          
+          searchcountry(val: any) {
+            console.log("countryData")
+            if (!this.countryData) {
+              return
+            }
+            let searchVal = val
+            if (!searchVal) {
+             // this.filteredState.next(this.countryDataList.slice())
+             this.countryDataList=this.countryData.slice()
+              return
+            }
+            else {
+              searchVal = searchVal.toLowerCase()
+            }
+            this.countryDataList=this.countryData.filter(res => res.country_name.toLowerCase().indexOf(searchVal) > -1)
+            // this.filteredState.next(
+            //   this.countryDataList.filter(res => res.state_name.toLowerCase().indexOf(searchVal) > -1)
+            // )
+          }
+          
 }

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.html

@@ -39,7 +39,11 @@
                                             <mat-form-field style="width:45%;">
                                                 <mat-select matInput placeholder="State" formControlName="residence_state"
                                                     required (selectionChange)="getCity($event.value,ix)">
-                                                    <mat-option>Select</mat-option>
+                                                    <mat-option>
+                                                            <ngx-mat-select-search formControlName="stateSearch" (keyup)="searchFun(sup,i,'state')"
+                                                            [placeholderLabel]="'Search State...'" 
+                                                            [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                                          </mat-option>
                                                     <mat-option value="{{s.state_id}}" *ngFor="let s of stateData">
                                                         {{s.name}}
                                                     </mat-option>
@@ -48,7 +52,11 @@
                                             <mat-form-field style="width:45%;">
                                                 <mat-select matInput placeholder="City" formControlName="residence_city"
                                                     required>
-                                                    <mat-option>Select</mat-option>
+                                                    <mat-option>
+                                                            <ngx-mat-select-search formControlName="citySearch" (keyup)="searchFun(sup,ix,'city')"
+                                                            [placeholderLabel]="'Search City...'" 
+                                                            [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                                          </mat-option>
                                                     <mat-option *ngFor="let c of cityData[ix]" [value]="c.city_id">
                                                         {{c.city_name}}
                                                     </mat-option>
@@ -61,7 +69,11 @@
                                             <mat-form-field style="width:45%;">
                                                 <mat-select matInput placeholder="Pin" formControlName="residence_pin"
                                                     required>
-                                                    <mat-option>Select</mat-option>
+                                                    <mat-option>
+                                                            <ngx-mat-select-search formControlName="pinSearch" (keyup)="searchFun(sup,ix,'pin')"
+                                                            [placeholderLabel]="'Search Pincode...'" 
+                                                            [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                                          </mat-option>
                                                     <mat-option *ngFor="let p of pincodeData[ix]" [value]="p.pincode_id">
                                                         {{p.pincode}}
                                                     </mat-option>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.ts

@@ -11,6 +11,8 @@ import { ActivatedRoute, Router } from "@angular/router";
 /** Service */
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 
 @Component({
@@ -59,6 +61,13 @@ export class FamilyDetailsComponent implements OnInit {
     documentsAndFilesList : any = [];
     lender_short_name: any;
     image_doc_params: { pdid: string; form_id: number; company_id: string; };
+
+    /**Declaration of search dropdown */
+    protected _onDestroy = new Subject<void>();
+    stateDataList: any = [];
+    cityDataList: any = [];
+    pincodeDataList: any = [];
+
     /** constructor Of the class */
     constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
         private router: Router,
@@ -295,6 +304,9 @@ export class FamilyDetailsComponent implements OnInit {
                 residence_city: ['', Validators.compose([])],
                 residence_state: ['', Validators.compose([])],
                 residence_pin: ['', Validators.compose([])],
+                stateSearch: [''],
+                citySearch: [''],
+                pinSearch:[''],
                 residence_other_pincode: [''],
                 residence_No_of_years: ['', Validators.compose([])],
                 residence_No_of_months:[''],
@@ -324,6 +336,9 @@ export class FamilyDetailsComponent implements OnInit {
                     residence_city: [val.residence_city, Validators.compose([])],
                     residence_state: [val.residence_state, Validators.compose([])],
                     residence_pin: [val.residence_pin, Validators.compose([])],
+                    stateSearch: [''],
+                    citySearch: [''],
+                    pinSearch :[''],
                     residence_other_pincode: [val.residence_other_pincode],
                     residence_No_of_years: [val.residence_No_of_years, Validators.compose([])],
                     residence_No_of_months:[val.residence_No_of_months || ''],
@@ -526,6 +541,7 @@ export class FamilyDetailsComponent implements OnInit {
                     }
                     else if (type == 6) {
                         this.stateData = data.records.filter(item => item.isactive == 1);
+                        this.stateDataList = this.stateData;
                     }
                     else if (type == 7) {
                         this.titleData = data.records.filter(item => item.isactive == 1);
@@ -540,6 +556,8 @@ export class FamilyDetailsComponent implements OnInit {
 
                 this.cityData[i] = data.records.cities;
                 this.pincodeData[i] = data.records.pincode;
+                this.cityDataList[i] = this.cityData[i];
+                this.pincodeDataList[i] = this.pincodeData[i]; 
 
             }
         });
@@ -740,4 +758,89 @@ export class FamilyDetailsComponent implements OnInit {
     //     });
     // }
 
+    searchFun(control:any,i:number,option){
+        console.log("control",control)
+            if (option == 'state') {
+              console.log("state")
+              control.controls['stateSearch'].valueChanges
+                .pipe(takeUntil(this._onDestroy))
+                .subscribe(()=>{
+                  this.searchState(control.controls['stateSearch'].value)
+                })
+            }
+            if (option == 'city') {
+                // this.cityData[i]=this.filterCity(this.stateList,control.value.state_name)
+               control.controls['citySearch'].valueChanges
+                 .pipe(takeUntil(this._onDestroy))
+                 .subscribe(() => {
+                   this.SearchCity(control.controls['citySearch'].value, i);
+                 })
+             } 
+             if (option == 'pin') {
+               console.log("pin")
+               control.controls['pinSearch'].valueChanges
+                 .pipe(takeUntil(this._onDestroy))
+                 .subscribe(()=>{
+                   this.searchPin(control.controls['pinSearch'].value,i)
+                 })
+             }
+          }
+
+          searchPin(val:any,index:number){
+            if(!this.pincodeData[index]){
+              return
+            }
+            let searchValue=val
+            if(!searchValue){
+              this.pincodeData[index]=this.pincodeDataList[index].slice()
+              return
+            }else{
+              searchValue=searchValue.toLowerCase()
+            }
+            this.pincodeData[index]=this.pincodeDataList[index].filter(value=>value.pincode.toLowerCase().indexOf(searchValue) > -1)
+          }
+          SearchCity(val: any, i: number) {
+             // let cityData=
+             console.log(this.cityDataList[i])
+            if (!this.cityDataList[i]) {
+              return
+            }
+            let searchValue = val
+            if (!searchValue) {
+             this.cityData[i]=this.cityDataList[i].slice()
+              return
+            } else {
+              searchValue = searchValue.toLowerCase()
+            }
+            this.cityData[i]=
+                this.cityDataList[i].filter(val=>val.city_name.toLowerCase().indexOf(searchValue)> -1)
+            
+            console.log("City Data value",this.cityData)
+            // this.filteredCity.next(
+            //   this.cityDataList[i].filter(value => value.city_name.toLowerCase().indexOf(searchValue) > -1)
+            // )
+        
+          }
+
+    searchState(val: any) {
+        console.log("statedata")
+        if (!this.stateDataList) {
+          return
+        }
+        let searchVal = val
+        if (!searchVal) {
+         // this.filteredState.next(this.stateList.slice())
+         this.stateData=this.stateDataList.slice()
+          return
+        }
+        else {
+          searchVal = searchVal.toLowerCase()
+        }
+        this.stateData=this.stateDataList.filter(res => res.name.toLowerCase().indexOf(searchVal) > -1)
+        // this.filteredState.next(
+        //   this.stateList.filter(res => res.state_name.toLowerCase().indexOf(searchVal) > -1)
+        // )
+      }
+  
+
 }

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.html

@@ -259,7 +259,11 @@
                                         </mat-form-field>
                                        <mat-form-field style="width:46%;">
                                                     <mat-select placeholder="State" formControlName="state" (selectionChange)="getCityAndPincodeDetails($event.value)">
-                                                                    <mat-option>Select</mat-option>
+                                                            <mat-option>
+                                                                    <ngx-mat-select-search formControlName="stateSearch" (keyup)="searchFun(loanDetailsForm,i,'state')"
+                                                                    [placeholderLabel]="'Search State...'" 
+                                                                    [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                                                  </mat-option>
                                                                     <mat-option *ngFor="let SL of m_stateList"
                                                                         [value]="SL.state_id">{{SL.name}}</mat-option>
                                                                 </mat-select>
@@ -267,7 +271,11 @@
 
                                         <mat-form-field style="width:46%;">
                                                     <mat-select placeholder="City" formControlName="city">
-                                                        <mat-option> Select </mat-option>
+                                                            <mat-option>
+                                                                    <ngx-mat-select-search formControlName="citySearch" (keyup)="searchFun(loanDetailsForm,i,'city')"
+                                                                    [placeholderLabel]="'Search City...'" 
+                                                                    [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                                                  </mat-option> 
                                                         <mat-option *ngFor="let CL of m_cityList"
                                                             [value]="CL.city_id">{{CL.city_name}}</mat-option>
                                                     </mat-select>
@@ -275,7 +283,11 @@
 
                                         <mat-form-field style="width:46%;">
                                                     <mat-select placeholder="Pincode" formControlName="pincode">
-                                                        <mat-option>Select</mat-option>
+                                                            <mat-option>
+                                                                    <ngx-mat-select-search formControlName="pinSearch" (keyup)="searchFun(loanDetailsForm,i,'pin')"
+                                                                    [placeholderLabel]="'Search Pincode...'" 
+                                                                    [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                                                  </mat-option>  
                                                         <mat-option *ngFor="let PL of m_pincodeList"
                                                             [value]="PL.pincode_id">{{PL.pincode}}</mat-option>
                                                     </mat-select>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.ts

@@ -16,6 +16,8 @@ import { ActivatedRoute, Router } from '@angular/router';
 /** Service */
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 
 @Component({
@@ -34,6 +36,12 @@ export class LoanDetailsComponent implements OnInit {
     pageTitle: string = "Loan Details";
     disableAfterSubmit: boolean = false;
 
+    /**Declaration of search dropdown */
+    protected _onDestroy = new Subject<void>();
+    stateData: any = [];
+    cityData: any = [];
+    pincodeData: any = [];
+
     /**Declaration of formfields Variables */
     private notifier: NotifierService;
     public loanDetailsForm: FormGroup;
@@ -85,6 +93,9 @@ export class LoanDetailsComponent implements OnInit {
     Owner_placeholder:string;
     address_placeholder: string;
     image_doc_params: { pdid: number; form_id: number; company_id: string; };
+    
+    
+    
     /** Constructor Of the Class */
     constructor(notifier: NotifierService,
         private fb: FormBuilder,
@@ -436,6 +447,7 @@ export class LoanDetailsComponent implements OnInit {
             data => {
                 if (data.status == 200 && data.dataStatus == true) {                
                    this.m_stateList = data.records;
+                   this.stateData = this.m_stateList;
                 }
                 else{
                    this.notifier.notify('warning', 'STATE Master Api Did not call ! Status - '+ data.status +' datastatus - '+ data.dataStatus);    
@@ -477,6 +489,9 @@ export class LoanDetailsComponent implements OnInit {
             state: [''],
             city: [''],
             pincode: [''],
+            stateSearch: [''],
+            citySearch: [''],
+            pinSearch: [''],
             other_pincode:[''],
             loandetails_remarks: [''],
         });
@@ -733,6 +748,8 @@ export class LoanDetailsComponent implements OnInit {
             if (data.status == 200) {
                     this.m_cityList = data.records.cities;
                     this.m_pincodeList = data.records.pincode;
+                    this.cityData = this.m_cityList;
+                    this.pincodeData = this.m_pincodeList;
             }
         });
     }
@@ -1024,4 +1041,86 @@ export class LoanDetailsComponent implements OnInit {
           }
       });
     }*/
+
+    searchFun(control:any,i:number,option){
+        console.log("control",control)
+            if (option == 'city') {
+               // this.cityData[i]=this.filterCity(this.stateList,control.value.state_name)
+              control.controls['citySearch'].valueChanges
+                .pipe(takeUntil(this._onDestroy))
+                .subscribe(() => {
+                  this.SearchCity(control.controls['citySearch'].value, i);
+                })
+            }
+            if (option == 'state') {
+              console.log("state")
+              control.controls['stateSearch'].valueChanges
+                .pipe(takeUntil(this._onDestroy))
+                .subscribe(()=>{
+                  this.searchState(control.controls['stateSearch'].value)
+                })
+            }
+            if (option == 'pin') {
+              console.log("pin")
+              control.controls['pinSearch'].valueChanges
+                .pipe(takeUntil(this._onDestroy))
+                .subscribe(()=>{
+                  this.searchPin(control.controls['pinSearch'].value,i)
+                })
+            }
+          }
+          searchPin(val:any,index:number){
+            if(!this.m_pincodeList){
+              return
+            }
+            let searchValue=val
+            if(!searchValue){
+              this.m_pincodeList=this.pincodeData.slice()
+              return
+            }else{
+              searchValue=searchValue.toLowerCase()
+            }
+            this.m_pincodeList=this.pincodeData.filter(value=>value.pincode.toLowerCase().indexOf(searchValue) > -1)
+          }
+          SearchCity(val: any, i: number) {
+             // let cityData=
+             console.log(this.cityData)
+            if (!this.cityData) {
+              return
+            }
+            let searchValue = val
+            if (!searchValue) {
+             this.m_cityList=this.cityData.slice()
+              return
+            } else {
+              searchValue = searchValue.toLowerCase()
+            }
+            this.m_cityList=
+                this.cityData.filter(val=>val.city_name.toLowerCase().indexOf(searchValue)> -1)
+            
+            console.log("City Data value",this.m_cityList)
+            // this.filteredCity.next(
+            //   this.cityData[i].filter(value => value.city_name.toLowerCase().indexOf(searchValue) > -1)
+            // )
+        
+          }
+          searchState(val: any) {
+            console.log("statedata")
+            if (!this.stateData) {
+              return
+            }
+            let searchVal = val
+            if (!searchVal) {
+             // this.filteredState.next(this.m_stateList.slice())
+             this.m_stateList=this.stateData.slice()
+              return
+            }
+            else {
+              searchVal = searchVal.toLowerCase()
+            }
+            this.m_stateList=this.stateData.filter(res => res.name.toLowerCase().indexOf(searchVal) > -1)
+            // this.filteredState.next(
+            //   this.m_stateList.filter(res => res.state_name.toLowerCase().indexOf(searchVal) > -1)
+            // )
+          }
 }

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-verification/manage-rental-verification/manage-rental-verification.component.html

@@ -42,6 +42,11 @@
                       <mat-label>State</mat-label>
                           <mat-select placeholder=""
                                     formControlName="state" required>
+                                    <mat-option>
+                                      <ngx-mat-select-search formControlName="stateSearch" (keyup)="searchFun(_rentalForm,i,'state')"
+                                      [placeholderLabel]="'Search State...'" 
+                                      [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                    </mat-option>
                                     <mat-option *ngFor="let stVal of stateList" [value]="stVal.state_id">
                                       {{stVal.name}}
                                     </mat-option>
@@ -51,6 +56,11 @@
                           <mat-label>City</mat-label>
                               <mat-select placeholder=""
                                         formControlName="city" required>
+                                        <mat-option>
+                                          <ngx-mat-select-search formControlName="citySearch" (keyup)="searchFun(_rentalForm,i,'city')"
+                                          [placeholderLabel]="'Search City...'" 
+                                          [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                        </mat-option>
                                         <mat-option *ngFor="let ctVal of cityList" [value]="ctVal.city_id">
                                           {{ctVal.city_name}}
                                         </mat-option>
@@ -61,6 +71,11 @@
                               <mat-label>Pincode</mat-label>
                                   <mat-select placeholder=""
                                             formControlName="pincode" required>
+                                            <mat-option>
+                                              <ngx-mat-select-search formControlName="pinSearch" (keyup)="searchFun(_rentalForm,i,'pin')"
+                                              [placeholderLabel]="'Search Pincode...'" 
+                                              [noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
+                                            </mat-option>
                                             <mat-option *ngFor="let pinVal of pincodeList" [value]="pinVal.pincode_id">
                                               {{pinVal.pincode}}
                                             </mat-option>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-verification/manage-rental-verification/manage-rental-verification.component.ts

@@ -8,6 +8,8 @@ import { PdTrigerService } from './../../../../../../pd-service/pd-triger.servic
 /**sweet alert */
 import Swal from 'sweetalert2';
 import { ImageCropComponent } from '../../dialogue/image-crop/image-crop.component';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 @Component({
   selector: 'app-manage-rental-verification',
@@ -70,6 +72,12 @@ export class ManageRentalVerificationComponent implements OnInit {
     SwalMessage: string;
   image_doc_params: { pdid: string; form_id: number; company_id: string; };
   
+   /**Declaration of search dropdown */
+   protected _onDestroy = new Subject<void>();
+   stateData: any = [];
+   cityData: any = [];
+   pincodeData: any = [];
+    
     constructor(notifier: NotifierService, private _pd: PdTrigerService ,private _fb: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: any,private dialogRef: MatDialogRef<ManageRentalVerificationComponent>,private dialog: MatDialog) { 
     
       this.pageTitle = this.data.manage_status==1 ? 'Add RI Details' : 'Update RI Details';
@@ -81,6 +89,7 @@ export class ManageRentalVerificationComponent implements OnInit {
       this.mergeCompanyApplicant = this.data.masterData.mergeCompanyApplicant;
       this.unitTypeList = this.data.masterData.unitTypeList;
       this.stateList = this.data.masterData.stateList;
+      this.stateData = this.stateList;
       this.unitMeasurementList = this.data.masterData.unitMeasurementList;
       // console.log(this.mergeCompanyApplicant); 
       // console.log(this.data.masterData.mergeCompanyApplicant);
@@ -167,6 +176,8 @@ export class ManageRentalVerificationComponent implements OnInit {
                 if (data.status == 200) {
                   this.cityList = data.records.cities;
                   this.pincodeList = data.records.pincode;
+                  this.cityData = this.cityList;
+                  this.pincodeData = this.pincodeList;
                 }
               });
           });
@@ -199,6 +210,9 @@ export class ManageRentalVerificationComponent implements OnInit {
           state:['',Validators.required],
           city:['',Validators.required],
           pincode:['',Validators.required],
+          stateSearch:[''],
+          citySearch:[''],
+          pinSearch:[''],
           validate_visited_address:[true],
           person_met: ['',Validators.required],
           property_owner: ['',Validators.required],
@@ -1115,6 +1129,88 @@ retriveFile(){
     this.data.parentData.pdapplicants_detials.splice(index, 1);  
   }
 
+  searchFun(control:any,i:number,option){
+    console.log("control",control)
+        if (option == 'city') {
+           // this.cityData[i]=this.filterCity(this.stateList,control.value.state_name)
+          control.controls['citySearch'].valueChanges
+            .pipe(takeUntil(this._onDestroy))
+            .subscribe(() => {
+              this.SearchCity(control.controls['citySearch'].value, i);
+            })
+        }
+        if (option == 'state') {
+          console.log("state")
+          control.controls['stateSearch'].valueChanges
+            .pipe(takeUntil(this._onDestroy))
+            .subscribe(()=>{
+              this.searchState(control.controls['stateSearch'].value)
+            })
+        }
+        if (option == 'pin') {
+          console.log("pin")
+          control.controls['pinSearch'].valueChanges
+            .pipe(takeUntil(this._onDestroy))
+            .subscribe(()=>{
+              this.searchPin(control.controls['pinSearch'].value,i)
+            })
+        }
+      }
+      searchPin(val:any,index:number){
+        if(!this.pincodeList){
+          return
+        }
+        let searchValue=val
+        if(!searchValue){
+          this.pincodeList=this.pincodeData.slice()
+          return
+        }else{
+          searchValue=searchValue.toLowerCase()
+        }
+        this.pincodeList=this.pincodeData.filter(value=>value.pincode.toLowerCase().indexOf(searchValue) > -1)
+      }
+      SearchCity(val: any, i: number) {
+         // let cityData=
+         console.log(this.cityData)
+        if (!this.cityData) {
+          return
+        }
+        let searchValue = val
+        if (!searchValue) {
+         this.cityList=this.cityData.slice()
+          return
+        } else {
+          searchValue = searchValue.toLowerCase()
+        }
+        this.cityList=
+            this.cityData.filter(val=>val.city_name.toLowerCase().indexOf(searchValue)> -1)
+        
+        console.log("City Data value",this.cityList)
+        // this.filteredCity.next(
+        //   this.cityData[i].filter(value => value.city_name.toLowerCase().indexOf(searchValue) > -1)
+        // )
+    
+      }
+      searchState(val: any) {
+        console.log("statedata")
+        if (!this.stateData) {
+          return
+        }
+        let searchVal = val
+        if (!searchVal) {
+         // this.filteredState.next(this.stateList.slice())
+         this.stateList=this.stateData.slice()
+          return
+        }
+        else {
+          searchVal = searchVal.toLowerCase()
+        }
+        this.stateList=this.stateData.filter(res => res.name.toLowerCase().indexOf(searchVal) > -1)
+        // this.filteredState.next(
+        //   this.stateList.filter(res => res.state_name.toLowerCase().indexOf(searchVal) > -1)
+        // )
+      }
+  
   }