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
• 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 (#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?