mdb-select2 Serchable


Topic: mdb-select2 Serchable

pparesh pro premium asked 8 months ago

Expected behavior I cannot initialize mdb-select 2 when I use search text from a pre-selected value. Actual behavior Doesn't initialize any values. Resources (screenshots, code snippets etc.)

{{c.label}}

TS file: this.filteredOptions = this.searchText.pipe( startWith(''), map((value: string) => this.filter(value)) ); filter(value: string): any[] {

const filterValue = value.toLowerCase();
//console.log("Filter:", this.pList.filter((option: any) => option.label.toLowerCase().includes(filterValue)));

return this.pList.filter((option: any) => option.label.toLowerCase().includes(filterValue));

}

this.property_id="5";


Arkadiusz Idzikowski staff commented 8 months ago

Please provide full HTML and Typescript code on which we will be able to reproduce this problem.


pparesh pro premium commented 8 months ago

{{c.label}} {{c.value}} Reported By


pparesh pro premium commented 8 months ago

import { Component, ViewChild, OnInit } from '@angular/core'; import { RDService} from './../../_services/rd.service'; import { RequestService} from '../../_services/request.service'; import { HttpResponse } from '@angular/common/http'; import { ViewEncapsulation } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Router } from "@angular/router"; import {FormControl} from '@angular/forms'; import { User } from './../../_models/user.model'; import {AuthenticationService} from '../../_services/authentication.service'; import { IMyOptions,ToastService } from 'ng-uikit-pro-standard'; import {saveAs as importedSaveAs} from 'file-saver'; import { Subject, Observable } from 'rxjs'; import { startWith, map } from 'rxjs/operators';

@Component({ selector: 'app-wo', templateUrl: './wo.component.html' }) export class WoComponent implements OnInit { user = this.AS.currentUserValue; constructor(private REQ:RequestService,private rd:RDService, private activeRoute: ActivatedRoute, private router: Router, private AS: AuthenticationService, private toastr: ToastService) { }

searchText = new Subject(); filteredOptions: Observable;

urlPrefix=""; queryParams = {}; showModal = false; file_info=""; add_docs = 0; owner_id=-1; owner_type="WO"; modalTitle="";

reportedby_dirty=false; contact_name_dirty=false; contact_info_dirty=false; wo_id = -1; tenant_id=-1; tenancy_id=-1; property_id="-1"; user_id=-1; wo = {}; property=[]; tenancy=[]; pList = []; // all properties property_info=""; woDocuments = [] woHistory=[]; tx_date = ""; dtList = this.rd.GetDates(); wosList = this.rd.GetWOStatus(); userList = this.rd.GetUsers(0); priorityList= this.rd.GetWOPriorities(); rmList= this.rd.GetWOReportingMethod(); rmMethod=""; woStatus=""; coordinator=""; priority="";

imageList = this.rd.GetImages();

ngOnInit() { this.wo['reportedby'] = this.user.firstName+" "+this.user.lastName; var r = "0"; this.urlPrefix = this.router.url.slice(0,this.router.url.lastIndexOf('/')+1); this.getProperties();

  this.activeRoute.queryParams.subscribe(routeParams => {
  this.activeRoute.queryParamMap.forEach((value)=>{value.keys.forEach(param=>this.queryParams[param]=value.get(param));});
  if (this.queryParams.hasOwnProperty('tenant_id')) {
    this.tenant_id=parseInt(this.queryParams["tenant_id"],10);
  }    
  if (this.queryParams.hasOwnProperty('wo_id')) {
    this.wo_id=parseInt(this.queryParams["wo_id"],10);
  }    

  if ( this.wo_id > 0 ) {
    this.getWO();
  } else {
    this.clearData();
  }     

  console.log("Ref Data: priority:", this.priorityList);
  console.log("Ref Data: rmList:", this.rmList);
  console.log("Ref Data: wosList:", this.wosList);

});

this.tx_date=this.dtList['tdate'];

this.filteredOptions = this.searchText.pipe(
  startWith(''),
  map((value: string) => this.filter(value))
);

}

filter(value: string): any[] {

const filterValue = value.toLowerCase();
//console.log("Filter:", this.pList.filter((option: any) => option.label.toLowerCase().includes(filterValue)));

return this.pList.filter((option: any) => option.label.toLowerCase().includes(filterValue));

}

getWO() { const qry = { "params": { "wo_id": this.wo_id } };

console.log("getWO: entered:", this.pList);
this.REQ.get('gwo',{"query":JSON.stringify(qry)}).subscribe((response: any) => {
  this.wo = response;
  console.log("getWO:", this.wo);
  this.wo_id = this.wo['wo_id'];
  this.property_id=""+this.wo['property_id'];
  console.log("Property: ", this.property_id);
  if ( this.wo['documents']) {
    this.woDocuments=JSON.parse(this.wo['documents']);
  }
  if ( this.wo['history']) {
    this.woHistory=JSON.parse(this.wo['history']).data;
  }
  this.add_docs = 1;
  this.owner_id=this.wo_id;
  this.owner_type="WO";
  this.rmMethod=""+this.wo['reporting_method'];
  this.woStatus=""+this.wo['status'];
  this.coordinator=""+this.wo['coordinator'];
  this.priority=""+this.wo['priority'];
  this.modalTitle="Transaction Document Upload";
  console.log("WO Doc: ", this.woDocuments);
  console.log("WO woHistory: ", this.woHistory);
}, error1 => {
  console.log(error1);
});

}


Arkadiusz Idzikowski staff commented 8 months ago

The code you provided is hard to read and we can't use it to reproduce the problem because there are too many variables to which we don't have access. Please update the formatting (you can edit your first post and add the code there) and provide a simple example on which we will be able to reproduce the problem or send a simple demo app to a.idzikowski@mdbootstrap.com.

I just checked the example with a search on my end and it looks like options are displayed correctly.


Please insert min. 20 characters.