search-multiselect-dropdown

Agular Search And Multiselection Dropdown

search-multiselect-dropdown Custom Dropdown component for Angular 8+ with search item, multiple and single selection options with customizing themes.

Supports

Angular Version	Package Version	Description
Angular 8	Version 2 any	If your version is angular 8 use Version 2 from library
Angular 9 or 10	Version 3 any	If your version is angular 9 use Version 3 from library
Angular 12+	Version 14 any	If your version is angular 9 use Version 3 from library
Angular 15+	Version 16 any	If your version is angular 9 use Version 3 from library

Features

• Single select dropdown
• Multi select dropdown
• Search dropdown list
• Angular forms support
• Angular v8 and above supported
• Cross browser support
• Modify colors and background
• Modify height of list container

Installation

npm install search-multiselect-dropdown

Include it to your module for example your app.module.ts

import { FormsModule } from "@angular/forms";
import { SearchMultiselectDropdownModule } from "search-multiselect-dropdown";

@NgModule({
  imports: [FormsModule, SearchMultiselectDropdownModule],
})
export class AppModule {}

Usage

import { Component } from "@angular/core";
import { DropDownConfig } from "search-multiselect-dropdown"; // Class for dropdown configuration

export class AppComponent {
  public config: DropDownConfig = {
    displayKey: "name", // If objects array passed which key to be displayed defaults to description
    search: true, // If wants to find item by name and select
    height: "300px", // Set max height of list container
    placeholder: "Search and select", // Set placeholder
    noResultsFound: "No result found", // Set text if no items available
    multiple: true, // Set true if want to select multiple items else for single selection set false
    disabled: false, // To disable the dropdown
    filterBlankData: true, // To filter tha blank or empty value from array of options
    showSelectedAtDropdown: false, // To show the selected list to dropdown lable instead of under dropdown
    theme: {
      inputBackground: "#40404c", // Set backgound color for main input box
      inputColor: "#fff", // Set text color of main input box
      containerListBackground: "#40404c", // Set background color for list container
      ContainerListColor: "#fff", // Set text color for list container
      selectedItemColor: "#fff", // Set text color for selected itemd
      selectedItemBackground: "#EF411F", //Set background color for selected itemd
      listHoverBackground: "#EF411F", // Set background color for mouse hover item list
      listHoverColor: "#fff", // Set text color for mouse hover item list
      searchInputColor: "#fff", // Set search text color for search input box
    },
  };

  selectedOptions = [
    {
      _id: "5a66d6c31d5e4e36c7711b7a",
      index: 0,
      balance: "$2,806.37",
      picture: "http://placehold.it/32x32",
      name: "Burns Dalton",
    },
    {
      _id: "5a66d6c3657e60c6073a2d22",
      index: 1,
      balance: "$2,984.98",
      picture: "http://placehold.it/32x32",
      name: "Mcintyre Lawson",
    },
  ];

  options = [
    {
      _id: "5a66d6c3657e60c6073a2d22",
      index: 1,
      balance: "$2,984.98",
      picture: "http://placehold.it/32x32",
      name: "Mcintyre Lawson",
    },
    {
      _id: "5a66d6c376be165a5a7fae33",
      index: 2,
      balance: "$2,794.16",
      picture: "http://placehold.it/32x32",
      name: "Amie Franklin",
    },
    {
      _id: "5a66d6c3f7854b6b4d96333b",
      index: 3,
      balance: "$2,537.14",
      picture: "http://placehold.it/32x32",
      name: "Jocelyn Horton",
    },
    {
      _id: "5a66d6c31f967d4f3e9d84e9",
      index: 4,
      balance: "$2,141.42",
      picture: "http://placehold.it/32x32",
      name: "Fischer Erickson",
    },
  ];
}

<search-multiselect-dropdown [config]="config" [(ngModel)]="selectedOptions" [options]="options"></search-multiselect-dropdown>

<pre style="margin: 20px 0;">
    {{selectedOptions | json}}
 </pre
>

Settings

Setting	Type	Description	Default Value
multiple	Boolean	Mode of this component. If set true user can select more than one option.	false
placeholder	String	Text to be show in the dropdown, when no items are selected.	'Select Item'
searchPlaceholder	String	Text to be show in the search input box.	'Search...'
disabled	Boolean	Disable the dropdown	false
filterBlankData	Boolean	To filter tha blank or empty value from array of options	false
showSelectedAtDropdown	Boolean	To show the selected list to dropdown lable instead of under dropdown	false
options	Array	Array of items from which to select. Should be an array of objects with id and text properties. You can also use custom properties. In that case you need to map idField and textField properties. As convenience, you may also pass an array of strings, in which case the same string is used for both the ID and the text(no mapping is required)	n/a
search	Boolean	If wants to find item by name and select	false
displayKey	String	If objects array passed which key to be displayed defaults to description	'value'
noResultsFound	String	Text to be show in list container if array of option list is empty or search result not found	'No results found!'
height	String	Set maximum height of the dropdown list in any unit e.g. '400px'	'auto'
theme	Object	Using class DropDownConfig object set various colors and backgound to dropdown	n/a

DropDownConfig Class

Setting	Type	Description	Default Value
inputBackground	String	Set backgound color for main input box	'#40404c'
inputColor	String	Set text color of main input box	'#fff'
containerListBackground	String	Set background color for list container	'#40404c'
ContainerListColor	String	Set text color for list container	'#fff'
selectedItemColor	String	Set text color for selected itemd	'#fff'
selectedItemBackground	String	et background color for selected itemd	'#EF411F'
listHoverBackground	String	Set background color for mouse hover item list	'#EF411F'
listHoverColor	String	Set text color for mouse hover item list	'#fff'
searchInputColor	String	Set search text color for search input box	'#fff'

Config Basic Setting

public config: DropDownConfig = {
    displayKey: 'name', // If objects array passed which key to be displayed defaults to description
    search: true, // If wants to find item by name and select
    height: '300px', // Set max height of list container
    placeholder: 'Search and select', // Set placeholder
    noResultsFound: 'No result found', // Set text if no items available
    multiple: true, // Set true if want to select multiple items else for single selection set false
    disabled: false, // To disable the dropdown
    filterBlankData: true, // To filter tha blank or empty value from array of options
    showSelectedAtDropdown: false, // To show the selected list to dropdown lable instead of under dropdown
    theme: {
      inputBackground: '#40404c', // Set backgound color for main input box
      inputColor: '#fff', // Set text color of main input box
      containerListBackground: '#40404c', // Set background color for list container
      ContainerListColor: '#fff', // Set text color for list container
      selectedItemColor: '#fff', // Set text color for selected itemd
      selectedItemBackground: '#EF411F', //Set background color for selected itemd
      listHoverBackground: '#EF411F', // Set background color for mouse hover item list
      listHoverColor: '#fff', // Set text color for mouse hover item list
      searchInputColor: '#fff' // Set search text color for search input box
    }
  };

Dependencies

• Angular 8 and 8+
• Font awesome icon library 4.7.0

Big Thanks To

• Rus Lan for finding problem and fixing bugs.