We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Compare DropDownList vs Combobox vs Autocomplete vs MultiSelect

EJ2-DropDownList Vs ComboBox Vs AutoComplete Vs MultiSelect

Essential JS2 is a lightweight, touch friendly, and responsive modern toolkit with no external dependencies. EJ2 components are available in four platforms such as: TypeScript, JavaScript, React, and Angular.

EJ2 has some editor components that can be used for selecting items from a list of items in websites or webapplication. AutoComplete, ComboBox, DropDownList, and MultiSelect are similar components with slight variations in functionalities.

AutoComplete: AutoComplete component is a textbox component that shows suggestion list based on the user query.

 

  • Use Cases: AutoComplete can be used in websites or webapplication where the user wants the list items to be filtered against the text typed in input area instead of browsing the complete list items for selection. For example, Ticket booking sites with input boxes for choosing origin and destination for journey, searching available products in shopping sites etc.
  • Target Audience: Developers who needs to develop websites with search options in their websites such as online shopping and for searching some available services in their sites.

ComboBox: ComboBox component is a combination of list box and DropDownList with editable text box, auto completion, and filtering functionality.

 

  • Use Cases: ComboBox can be used in websites or webapplication where the users can either search their options in input box or browse with the available options, and the user can be able to edit the selected option via input box. This cannot be used in case of multiple selection. It can be used in sites where the user can edit items in input box and enter an option that is not present in the predefined list of items.
  • Target Audience: Developers who need to develop websites with search options as well as browse with predefined list items in their sites. Chosen value can be edited in ComboBox input box.

DropDownList: DropDownList component displays a single column list of items from that the user can make single selection.

 

  • Use Cases: DropDownList works well with small or large sets of data. DropDownList can be used in websites where the users are limited to some list of choices with non-editable input box. It is advisable to use DropDownList when the list items are few. For example, to choose a certain range of pricing for products with min and max value in shopping sites and to select bus types based on requirement in ticket booking sites. This cannot be used in case of multiple selection.
  • Target Audience: Developers who needs to develop websites with a component that limits the user’s selection with a set of predefined list items with a non-editable input box.

MultiSelect: The MultiSelect component contains a list of predefined values from that the user can make multiple selection. The functionality of MultiSelect resembles the SELECT form element of HTML. Users can also enter an option that is not in the list. The selected items are shown with three different UI modes (Default, Box, and Delimiter).

 

  • Use Cases: MultiSelect can be used when the user needs to select multiple items from predefined list of items. For example, filtering products based on multiple conditions in shopping sites.
  • Target Audience: Developers who need to develop websites with a component which allows the user to select multiple items from a set of predefined list items with different UI modes.

 

Comparison table with features of these components are listed in the following.

 

Features

AutoComplete

ComboBox

DropDownList.

MultiSelect

Input box

Display as well as typing a text

Display as well as typing a text

Display the selected text.

Display multiple selected items as well as typing a text

Selection

Single selection

Single selection

Single selection

Multiple selection

Filtering

Supported

Supported

Supported

Supported

Grouping

Supported

Supported

Supported

Supported

Icons

Supported

Supported

Supported

Supported

Case sensitive filtering

Supported

Supported

Supported

Supported

Locale

Supported

Supported

Supported

Supported

Keyboard Interaction

Supported

Supported

Supported

Supported

Autofill

Supported

Supported

Not Supported

Not Supported

Template

Item template,

Group template,

Header template,

Footer template,

No records template and

Action failure template.

 

Item template,

Group template,

Header template,

Footer template,

No records template and

Action failure template.

 

 

Item template,

Value template,

Group template,

Header template,

Footer template,

No records template and

Action failure template.

Item template,

Value template,

Group template,

Header template,

Footer template,

No records template and

Action failure template.

Custom Value

Not supported

Supported

Not supported

Supported

 

 

 

 

 

 

Article ID: Published Date: Last Revised Date: Platform: Control:
8329 01/19/2018 01/30/2018 JavaScript - EJ 2 AutoComplete
Did you find this information helpful?
Comments
Ganeshwari G [Syncfusion] Jul 27, 2018

dda

Reply
Add Comment
You must log in to leave a comment

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.