Top Related Projects
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
Selectize is the hybrid of a textbox and <select> box. It's jQuery based, and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.
Deprecated - Chosen is a library for making long, unwieldy select boxes more friendly.
The Select Component for React.js
Simple autocomplete pure vanilla Javascript library.
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Quick Overview
UI-Select is an AngularJS replacement for select elements. It provides a customizable dropdown list with features like search, tagging, and remote data sets. The project aims to enhance the user experience of selecting items from a list, especially when dealing with large datasets or complex selection requirements.
Pros
- Highly customizable appearance and behavior
- Supports single and multiple selections
- Integrates well with AngularJS applications
- Allows for asynchronous data loading
Cons
- Limited to AngularJS 1.x, not compatible with Angular 2+
- Performance can degrade with very large datasets
- Learning curve for advanced customizations
- No longer actively maintained (as of 2023)
Code Examples
- Basic usage with an array of strings:
<ui-select ng-model="ctrl.selected">
<ui-select-match placeholder="Select a color">{{$select.selected}}</ui-select-match>
<ui-select-choices repeat="color in ctrl.colors | filter: $select.search">
<span ng-bind-html="color | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
- Multiple selection with objects:
<ui-select multiple ng-model="ctrl.selectedPeople" theme="bootstrap">
<ui-select-match placeholder="Select people...">{{$item.name}}</ui-select-match>
<ui-select-choices repeat="person in ctrl.people | propsFilter: {name: $select.search}">
<div ng-bind-html="person.name | highlight: $select.search"></div>
<small ng-bind-html="person.email | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
- Asynchronous data loading:
<ui-select ng-model="ctrl.address.selected"
theme="bootstrap"
ng-disabled="ctrl.disabled"
reset-search-input="false">
<ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
<ui-select-choices repeat="address in ctrl.addresses track by $index"
refresh="ctrl.refreshAddresses($select.search)"
refresh-delay="0">
<div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
Getting Started
-
Install UI-Select via npm:
npm install ui-select
-
Include the necessary files in your HTML:
<link rel="stylesheet" href="node_modules/ui-select/dist/select.min.css"> <script src="node_modules/angular/angular.min.js"></script> <script src="node_modules/ui-select/dist/select.min.js"></script>
-
Add 'ui.select' as a dependency in your Angular module:
angular.module('myApp', ['ui.select']);
-
Use the
<ui-select>
element in your HTML as shown in the code examples above.
Competitor Comparisons
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
Pros of Select2
- Wider browser compatibility, including older versions of Internet Explorer
- More extensive documentation and larger community support
- Supports both jQuery and native JavaScript implementations
Cons of Select2
- Requires jQuery as a dependency (for the jQuery version)
- Heavier in terms of file size compared to ui-select
- Not specifically designed for Angular, which may lead to integration challenges
Code Comparison
ui-select:
<ui-select ng-model="selectedItem">
<ui-select-match placeholder="Select an item">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="item in items | filter: $select.search">
<span ng-bind-html="item.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
Select2:
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
<script>
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
</script>
Both libraries offer powerful select box enhancements, but ui-select is tailored for Angular applications, while Select2 provides a more versatile solution for various web development scenarios. The choice between them depends on the specific project requirements, framework preferences, and desired features.
Selectize is the hybrid of a textbox and <select> box. It's jQuery based, and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.
Pros of selectize.js
- Framework-agnostic, can be used with various JavaScript libraries or frameworks
- More extensive customization options and plugins
- Better performance for large datasets
Cons of selectize.js
- Steeper learning curve due to more complex API
- Less seamless integration with Angular applications
- Requires more manual setup for advanced features
Code Comparison
selectize.js:
$('#select-beast').selectize({
create: true,
sortField: 'text'
});
ui-select:
<ui-select ng-model="ctrl.person.selected">
<ui-select-match>{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="person in people | filter: $select.search">
{{person.name}}
</ui-select-choices>
</ui-select>
Key Differences
- ui-select is specifically designed for Angular applications, offering tighter integration with Angular's ecosystem
- selectize.js provides more flexibility for use across different frameworks and vanilla JavaScript projects
- ui-select syntax is more declarative and Angular-like, while selectize.js uses a more traditional JavaScript approach
- selectize.js offers more built-in features and plugins out of the box, whereas ui-select may require additional customization for advanced functionality
Both libraries provide powerful select/dropdown functionality, but the choice between them largely depends on the specific project requirements and the development environment.
Deprecated - Chosen is a library for making long, unwieldy select boxes more friendly.
Pros of Chosen
- Lightweight and easy to implement
- Works with both jQuery and Prototype
- Extensive browser compatibility, including older versions
Cons of Chosen
- Not specifically designed for Angular applications
- Less integration with Angular's two-way data binding
- Limited customization options compared to ui-select
Code Comparison
Chosen implementation:
<select data-placeholder="Choose a country..." class="chosen-select" multiple>
<option value=""></option>
<option value="US">United States</option>
<option value="UK">United Kingdom</option>
</select>
ui-select implementation:
<ui-select multiple ng-model="selectedCountries" theme="bootstrap">
<ui-select-match placeholder="Choose a country...">{{$item.name}}</ui-select-match>
<ui-select-choices repeat="country in countries | filter: $select.search">
{{country.name}}
</ui-select-choices>
</ui-select>
Summary
Chosen is a versatile and widely compatible select enhancement plugin, suitable for various web projects. However, ui-select offers tighter Angular integration and more advanced features for Angular-specific applications. The choice between the two depends on the project's requirements, with Chosen being more general-purpose and ui-select catering specifically to Angular developers.
The Select Component for React.js
Pros of react-select
- More active development and larger community support
- Extensive customization options and theming capabilities
- Better performance for large datasets and complex scenarios
Cons of react-select
- Steeper learning curve for beginners
- Requires additional setup for use with form libraries
Code Comparison
ui-select:
<ui-select ng-model="selectedItem">
<ui-select-match placeholder="Select an item">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="item in items | filter: $select.search">
<span ng-bind-html="item.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
react-select:
import Select from 'react-select';
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
];
<Select options={options} />
Summary
react-select offers more flexibility and better performance for complex use cases, while ui-select provides a simpler integration with AngularJS applications. react-select has a more active community and frequent updates, but may require more setup time. ui-select is easier to use for basic scenarios but has limitations in customization and handling large datasets.
Simple autocomplete pure vanilla Javascript library.
Pros of autoComplete.js
- Lightweight and dependency-free, making it easier to integrate into various projects
- Supports multiple data sources, including JSON, Arrays, and Functions
- Highly customizable with extensive configuration options
Cons of autoComplete.js
- Limited to vanilla JavaScript, while ui-select is specifically designed for AngularJS applications
- May require more manual setup and integration compared to ui-select's Angular-specific features
- Lacks some advanced features like multi-select and tagging that ui-select provides out of the box
Code Comparison
ui-select:
<ui-select ng-model="selectedItem">
<ui-select-match placeholder="Select an item">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="item in items | filter: $select.search">
<span ng-bind-html="item.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
autoComplete.js:
const autoCompleteJS = new autoComplete({
selector: "#autoComplete",
data: {
src: items,
key: ["name"]
},
resultItem: {
highlight: true
}
});
Both libraries offer autocomplete functionality, but ui-select is tightly integrated with AngularJS, while autoComplete.js provides a more flexible, framework-agnostic solution. The choice between them depends on the specific project requirements and the development environment.
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Pros of Sortable
- Framework-agnostic, works with vanilla JavaScript and various frameworks
- Supports touch devices and nested sortable lists
- More versatile, can be used for drag-and-drop functionality beyond just select elements
Cons of Sortable
- Requires more setup and configuration for complex use cases
- Less focused on select functionality, may require additional work for dropdown-style selects
- Larger file size due to broader feature set
Code Comparison
ui-select:
<ui-select ng-model="selectedItem">
<ui-select-match>{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="item in items | filter: $select.search">
{{item.name}}
</ui-select-choices>
</ui-select>
Sortable:
new Sortable(document.getElementById('list'), {
animation: 150,
ghostClass: 'blue-background-class',
onSort: function (evt) {
// Handle sort event
}
});
Key Differences
- ui-select is specifically designed for AngularJS and focuses on select functionality
- Sortable is more flexible and can be used for various drag-and-drop scenarios
- ui-select provides a more opinionated structure for select elements
- Sortable requires manual DOM manipulation and event handling for similar functionality
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
AngularJS ui-select
AngularJS-native version of Select2 and Selectize. http://angular-ui.github.io/ui-select/
Latest Changes
- Check CHANGELOG.md
Features
- Search, Select, Multi-select and Tagging
- Multiple Themes: Bootstrap, Select2 and Selectize
- Keyboard support
- No jQuery required (except for old browsers)
- Small code base: 4.57KB min/gzipped vs 20KB for select2
For the roadmap, check issue #3 and the Wiki page.
Installation Methods
npm
$ npm install ui-select
bower
$ bower install angular-ui-select
Development
Prepare your environment
- Install Node.js and NPM (should come with)
- Install global dev dependencies:
npm install -g gulp
- Install local dev dependencies:
npm install
in repository directory
Development Commands
gulp
to jshint, build and testgulp build
to jshint and buildgulp test
for one-time test with karma (also build and jshint)gulp watch
to watch src files to jshint, build and test when changedgulp docs
build docs and examples
Contributing
- Check CONTRIBUTING.md
- Run the tests
- Try the examples
When issuing a pull request, please exclude changes from the "dist" folder to avoid merge conflicts.
Top Related Projects
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
Selectize is the hybrid of a textbox and <select> box. It's jQuery based, and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.
Deprecated - Chosen is a library for making long, unwieldy select boxes more friendly.
The Select Component for React.js
Simple autocomplete pure vanilla Javascript library.
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot