nb-select: Select All, Unselect All, and type ahead search feature request

[ashwin-kambli]

Issue type

I'm submitting a ... (check one with "x")

• [ ] bug report
• [x] feature request

Issue description

Current behavior:

Currently, the nb-select component does not support the following features:

1. Select All
2. Unselect All, and
3. Type ahead search features

Expected behavior:

It would be provide a great usability boost if the above 3 features are supported by the nb-select component.

[VladimirHumeniuk]

Bold plus! Search feature for select is very necessary!

[anthowm]

+1

[ArtemRomanovsky]

hi @ashwin-kambli ! We are currently working on our 5th version of Nebular where the autocomplete component will be available (https://github.com/akveo/nebular/pull/1947). Also, we will consider the p. 1 and 2 of your issue, thank you for the feedback.

[ashishc]

If you cant wait till 5th version I've found angular2-multiselect-dropdown useful with following css in @theme/style/style.scss for nebular look and feel that does multiselect, select all and search operation

.cuppa-dropdown {
width: 300px;
display: inline-block;
color: nb-theme(text-basic-color);
box-shadow: none;
border: none !important;
left: 15px;
.list-filter {
  border: 1px solid nb-theme(color-primary-500);
  input {
    background-color: nb-theme(background-basic-color-1) !important;
    color: nb-theme(color-basic-active);
  }
  input:focus {
    outline: none;
  }
  .fa {
    color: nb-theme(background-basic-color-2) !important;
  }
}
button.c-btn {
  color: nb-theme(color-basic-active);
  box-shadow: 0 0 0 transparent !important;
  border-color: nb-theme(color-primary-500) !important;
  border-radius: 5px !important;
  border-style: solid !important;
  background-color: nb-theme(background-basic-color-2) !important;
  text-align: left;
}
.selected-list {
  box-shadow: none !important;
  border: none !important;
}

.dropdown-list {
  position: absolute;
  padding-top: 14px;
  width: 100%;
  z-index: 9999;
  ul {
    li:hover {
      color: nb-theme(color-primary-hover) !important;
      background-color: nb-theme(background-basic-color-1) !important;
    }
  }
}

.list-area {
  background-color: nb-theme(background-basic-color-1) !important;
  color: nb-theme(text-basic-color) !important;
  box-shadow: none;
  border: none !important;

}
.pure-checkbox input[type="checkbox"] + label {
  color: nb-theme(text-basic-color) !important;
}
.pure-checkbox input[type="checkbox"] + label:hover {
  color: nb-theme(color-primary-hover) !important;
}}

[bressanelle]

hi @ashwin-kambli ! We are currently working on our 5th version of Nebular where the autocomplete component will be available (#1947). Also, we will consider the p. 1 and 2 of your issue, thank you for the feedback.

Where is documentation?

[egmed]

So when the 'Search the dropdown' feature will be ready? anytime soon?

[Xymanek]

The docs are here: https://akveo.github.io/nebular/docs/components/autocomplete/overview

However, it doesn't seem like there is a way to limit the input only to the provided options, neither to get an array out of the input field

[MashRoofa]

The theme of angular2-multiselect-dropdown, styled for Nebular: Theming Docs can be found here: http://cuppalabs.github.io/components/multiselectDropdown/

@import "themes";

@include nb-install() {
  .c-btn {
    background: nb-theme(input-basic-background-color);
    border: 1px solid nb-theme(input-basic-border-color);
    color: nb-theme(text-basic-color);
  }

  .selected-list .c-list .c-token {
    background: nb-theme(background-primary-color-1); }
  .selected-list .c-list .c-token .c-label {
    color: #fff; }
  .selected-list .c-list .c-token .c-remove svg {
    fill: #fff; }

  .selected-list .c-angle-down svg, .selected-list .c-angle-up svg {
    fill: #333; }

  .dropdown-list ul li:hover {
    background: nb-theme(select-outline-basic-hover-background-color);
    border-color: nb-theme(select-outline-basic-hover-border-color);
  }

  .arrow-up, .arrow-down {
    border-bottom: 15px solid nb-theme(select-outline-basic-background-color); }

  .arrow-2 {
    border-bottom: 15px solid nb-theme(select-outline-basic-hover-border-color); }

  .list-area {
    border: 1px solid nb-theme(select-outline-basic-border-color);
    background: nb-theme(select-outline-basic-background-color);
  }

  .select-all {
    border-bottom: 1px solid nb-theme(border-alternative-color-5);
  }
  .list-filter input {
    color: nb-theme(text-basic-color);
    background: nb-theme(select-outline-basic-background-color);
  }
  .list-filter {
    border-bottom: 1px solid nb-theme(border-alternative-color-5);
  }
  .list-filter .c-search svg {
    fill: nb-theme(text-basic-color)
  }
  .list-filter .c-clear svg {
    fill: nb-theme(text-basic-color)
  }

  .pure-checkbox input[type="checkbox"]:focus + label:before, .pure-checkbox input[type="checkbox"]:hover + label:before {
    border-color: nb-theme(background-primary-color-1);
    background-color: #f2f2f2; }

  .pure-checkbox input[type="checkbox"] + label {
    color: nb-theme(text-basic-color); }

  .pure-checkbox input[type="checkbox"] + label:before {
    color: nb-theme(background-primary-color-1);
    border: 1px solid nb-theme(background-primary-color-1); }

  .pure-checkbox input[type="checkbox"] + label:after {
    background-color: nb-theme(background-primary-color-1); }

  .pure-checkbox input[type="checkbox"]:disabled + label:before {
    border-color: #cccccc; }

  .pure-checkbox input[type="checkbox"]:disabled:checked + label:before {
    background-color: #cccccc; }

  .pure-checkbox input[type="checkbox"] + label:after {
    border-color: #ffffff; }

  .pure-checkbox input[type="radio"]:checked + label:before {
    background-color: white; }

  .pure-checkbox input[type="checkbox"]:checked + label:before {
    background: nb-theme(background-primary-color-1); }

  .single-select-mode .pure-checkbox input[type="checkbox"]:focus + label:before, .single-select-mode .pure-checkbox input[type="checkbox"]:hover + label:before {
    border-color: nb-theme(background-primary-color-1);
    background-color: #f2f2f2; }

  .single-select-mode .pure-checkbox input[type="checkbox"] + label {
    color: nb-theme(text-basic-color); }

  .single-select-mode .pure-checkbox input[type="checkbox"] + label:before {
    color: transparent !important;
    border: 0px solid nb-theme(background-primary-color-1); }

  .single-select-mode .pure-checkbox input[type="checkbox"] + label:after {
    background-color: transparent !important; }

  .single-select-mode .pure-checkbox input[type="checkbox"]:disabled + label:before {
    border-color: #cccccc; }

  .single-select-mode .pure-checkbox input[type="checkbox"]:disabled:checked + label:before {
    background-color: #cccccc; }

  .single-select-mode .pure-checkbox input[type="checkbox"] + label:after {
    border-color: nb-theme(background-primary-color-1); }

  .single-select-mode .pure-checkbox input[type="radio"]:checked + label:before {
    background-color: white; }

  .single-select-mode .pure-checkbox input[type="checkbox"]:checked + label:before {
    background: none !important; }

  .selected-item {
    background: rgba(51, 102, 255, 0.15);
  }

  .btn-iceblue {
    background: nb-theme(background-primary-color-1);
    border: 1px solid #ccc;
    color: #fff; }

}

[suppadeliux]

Hoping for this change to happen! That will be awesome.

[vladutvaida]

@MashRoofa can you pput the html and typescript code also?

[MashRoofa]

@vladutvaida

HTML

<form [formGroup]="myForm">
  <div class="row">
    <div class="form-group col-sm-12">
      <p>Select an item</p>
      <angular2-multiselect [data]="data"
                            (onClose)="myForm.controls.myField.markAsTouched()"
                            formControlName="myField"
                            [settings]="dropdownSettings">
      </angular2-multiselect>
    </div>
  </div>
</form>

Typescript

  dropdownSettings: any = <Partial<DropdownSettings>>{
    singleSelection: false,
    text: "Select Item",
    enableSearchFilter: true,
    labelKey: 'name',
    clearAll: false,
    showCheckbox: false
  }

Note that when using this multi-select it will usually save the selected items as objects that hold the selected item id.

i.e.,

export interface IObjectWithId{
  id: number;
}

[vladutvaida]

Thank you very much, But can t you give me a html implementării of nb multiselect and autocompletion?

Trimis din Yahoo Mail pentru iPhone

La sâmbătă, iunie 12, 2021, 2:30 p.m., MashRoofa @.***> a scris:

@MashRoofa can you pput the html and typescript code also?

HTML <form [formGroup]="myForm">

Select an item

Typescript dropdownSettings: any = <Partial>{ singleSelection: false, text: "Select Item", enableSearchFilter: true, labelKey: 'name', clearAll: false, showCheckbox: false }

Note that when using this multi-select it will usually save the selected items as objects that hold the selected item id.

i.e., export interface IObjectWithId{ id: number; }

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[MashRoofa]

Im afraid i cant help with that, i don't have a similar example.

On 12 Jun 2021, at 4:56 PM, vladutvaida @.**@.>> wrote:

Thank you very much, But can t you give me a html implementării of nb multiselect and autocompletion?

Trimis din Yahoo Mail pentru iPhone

La sâmbătă, iunie 12, 2021, 2:30 p.m., MashRoofa @.***> a scris:

@MashRoofa can you pput the html and typescript code also?

HTML <form [formGroup]="myForm">

Select an item

Typescript dropdownSettings: any = <Partial>{ singleSelection: false, text: "Select Item", enableSearchFilter: true, labelKey: 'name', clearAll: false, showCheckbox: false }

Note that when using this multi-select it will usually save the selected items as objects that hold the selected item id.

i.e., export interface IObjectWithId{ id: number; }

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/akveo/nebular/issues/1859#issuecomment-860057037, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AF3JRIEZLGYCB6DCJLXK433TSNRSBANCNFSM4IGRYRTA.

Great Regards, Christos Amyrotos.