Type Ahead in Select component

[32x0lf]

Hi @xidedix,

Been looking for a type ahead feature in select component. I am not sure if coreui have this or how can I implement this one?

Thanks in advance

[32x0lf]

Hi Hoping to hear from the coreui team. I don't want to mess around with my template by installing other bootstrap libraries or other packages. TIA.

[xidedix]

@32x0lf do you mean sth like https://coreui.io/angular/docs/forms/multi-select#single-selection but with adding new entry?

[32x0lf]

Hi @xidedix

Same like this. Typeahead open focus. No adding of new entry. I think the text or single selection for select only. I am not using multi select.

[32x0lf]

Should the only way is to use multi select for this?

[32x0lf]

Hi @xidedix ,

I have not seen the api reference for multi. I can remove the checkbox. I am gonna use multi

[32x0lf]

Hi @xidedix,

I have encounter problems when using multi select component. I am using optionsstyle = text and just single select. First problem is I cannot initialize the default value. Second problem is, I have a data with emails and names in this format "name - email address". When I select one value from the option it will give me another value. This have 1 thousand plus of values.

[32x0lf]

In addition with my previous concern no 1. My data looks like this. {text: 'ALL', value:'0',.... etc} . I want to have a default value which is ALL and I am using it custom1: new FormControl('0') . I also tried UntypeFormControl but still no luck. In, docs they are using array but on my side since I am using single only I am not using the array. or should I? Please advise

[xidedix]

@32x0lf

1. About default value:

...
formGroup = new FormGroup({
  singleSelect: new FormControl(['0'])
});
...

<form [formGroup]="formGroup">
  <c-multi-select optionsStyle="text" selectionType="text" formControlName="singleSelect">
    <c-multi-select-option value="0">ALL</c-multi-select-option>
    <c-multi-select-option value="1">Angular</c-multi-select-option>
    <c-multi-select-option value="2">Bootstrap</c-multi-select-option>
    <c-multi-select-option value="3">React</c-multi-select-option>
    <c-multi-select-option value="4">Vue</c-multi-select-option>
  </c-multi-select>
</form>
<br>
<p> Form value: {{ formGroup.value | json }}</p>

2. Could you describe your data structure? => https://coreui.io/support/

3. 1000+ records should do, however for bigger options count we're going to introduce virtual scroller, later this month.

[32x0lf]

Hi @xidedix ,

Still not working for #1.

<c-multi-select selectionType="text"  optionsStyle="text" size="sm" formControlName="singleSelect">
  <c-multi-select-option *ngFor="let data of filter" [value]="data.name">{{data.value}}</c-multi-select-option>
</c-multi-select>

FormGroup = new new FormGroup({
 singleSelect: new FormControl(['0'])
})

[xidedix]

@32x0lf

FormGroup = new Form({

are you sure this is right? looks like you're trying to instantiate Form interface directly

also - there is an excessive quote in your markup size="sm" "

[32x0lf]

@32x0lf

FormGroup = new Form({

are you sure this is right? looks like you're trying to instantiate Form interface directly

also - there is an excessive quote in your markup size="sm" "

Apologies got some typo. but still, it is not working. I have edited my post as well.

[xidedix]

@32x0lf and where is markup for [formGroup]?

[32x0lf]

This is the complete code

FormGroup : FormGroup = new FormGroup({});

ngOnInit():void{
  this.InitForm();
}

 InitForm(){
  this.FormGroup = new FormGroup({
 singleSelect: new FormControl(['0'])
})
}

<form [formGroup]="FormGroup " (ngSubmit)="GetRecord()" autocomplete="off">
    <c-multi-select selectionType="text"  optionsStyle="text" size="sm" formControlName="singleSelect">
  <c-multi-select-option *ngFor="let data of filter" [value]="data.name">{{data.value}}</c-multi-select-option>
</c-multi-select>
</form>

[xidedix]

@32x0lf thanks, now it makes sense, I can reproduce the issue

[xidedix]

@32x0lf as a workaround you can set default [selected] value sth like this: (assuming "0" is in the data.name for label "ALL")

<c-multi-select-option 
  *ngFor="let data of filter" 
  [value]="data.name" 
  [selected]="data.name==='0'"
>
  {{data.value}}
</c-multi-select-option>

but there is another bug with single select: When I select one value from the option it will give me another value nice catch, thanks @32x0lf - fix on the way

[xidedix]

@32x0lf let us know if you've got it working

latest:

• 4.3.13 for Angular 15
• 4.2.31 for Angular 14

[32x0lf]

yes it is working now but during on first load, It will highlight those boxes having a default value of 0.

I am using @angular/cli version is 14.2.4 @coreui/angular-pro is 4.2.25

[32x0lf]

I guess I need to update my version.

@xidedix 4.2.31 is @coreui/angular-pro?

[xidedix]

I guess I need to update my version.

@xidedix 4.2.31 is @coreui/angular-pro?

that's right 4.2.31 is the latest for Angular 14

[32x0lf]

@xidedix after updating to 4.2.31 the issue is gone. Thank you so much.

[xidedix]

@32x0lf thanks for the catch!