Type Ahead in Select component
32x0lf opened this issue · 21 comments
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
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.
@32x0lf
do you mean sth like https://coreui.io/angular/docs/forms/multi-select#single-selection
but with adding new entry?
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.
Should the only way is to use multi select for this?
Hi @xidedix ,
I have not seen the api reference for multi. I can remove the checkbox. I am gonna use multi
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.
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
- 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>-
Could you describe your data structure? => https://coreui.io/support/
-
1000+ records should do, however for bigger options count we're going to introduce virtual scroller, later this month.
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'])
})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>@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
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