Topic: mdb-select2 Serchable

pparesh priority asked 3 years 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 3 years ago

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


pparesh priority commented 3 years ago

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


pparesh priority commented 3 years 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 3 years 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.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.2.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No