Angular-Selectize is an Angular version of Brian Reavis' Selectize. From the Selectize website:

Selectize is the hybrid of a textbox and box. It's jQuery-based and it's useful for tagging, contact lists, country selectors, and so on.

Try the Demos

Angular Features

• Model bindings
• Form bindings
• Option bindings

Original Selectize Features

• Skinnable — Comes with LESS stylesheets and shims for Bootstrap 2 and Bootstrap 3 (+ precompiled CSS).
• Clean API & Code + Extensible — Interface & make addons like a boss with the plugin system. Fully documented on GitHub & inline.
• Smart Ranking / Multi-Property Searching & Sorting — Want to search an item's title and description? No problem. You can even override the scoring function used for sorting if you want to get crazy. Uses sifter.js.
• Caret Between Items — Order matters sometimes. Use the left and right arrow keys to move between items.
• Select & Delete multiple items at once — Hold down option on Mac or ctrl on Windows to select more than one item to delete.
• RTL + Díåcritîçs supported — Great for international environments.
• Item Creation — Allow users to create items on the fly (and it's async friendly; the control locks until you invoke a callback).
• Remote Data Loading — For when you have thousands of options and want them provided by the server as the user types.

Requirements

• AngularJS
• JQuery
• Selectize

Install

We use bower for dependency management. Install Angular-selectize into your project by running the command

$ bower install angular-selectize2

If you use a bower.json file in your project, you can have Bower save angular-selectize2 as a dependency by passing the --save or --save-dev flag with the above command.

This will copy the angular-selectize2 files into your bower_components folder, along with its dependencies. Load the script files in your application:

<link rel="stylesheet" href="bower_components/selectize/dist/css/selectize.default.css ">
<script type="text/javascript" src="bower_components/jquery/jquery.js"></script>
<script type="text/javascript" src="bower_components/selectize/dist/js/standalone/selectize.min.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-selectize2/dist/selectize.js"></script>

(Note that jquery must be loaded before angular so that it doesn't use jqLite internally)

Add the selectize module as a dependency to your application module:

var myAppModule = angular.module('MyApp', ['selectize']);

Usage

Setup your controller variables:

$scope.myModel = 1;

$scope.myOptions = [
  {id: 1, title: 'Spectrometer'},
  {id: 2, title: 'Star Chart'},
  {id: 3, title: 'Laser Pointer'}
];

$scope.config = {
  create: true,
  valueField: 'id',
  labelField: 'title',
  delimiter: '|',
  placeholder: 'Pick something'
  // maxItems: 1
}

Add the select element to your view template:

<div selectize="config" options='myOptions' ng-model="myModel"></div>

Config

Theoretically, all of the config options from the original selectize should work. But I have not been able to test them all.

• Selectize config options
• Selectize API

Inline Config

<div selectize="{create:true, maxItems:10}" options='myOptions' ng-model="myModel"></div>

Tag editor

$scope.myModel = 1;

$scope.myOptions = [
  {value: 1, text: 'Spectrometer'},
  {value: 2, text: 'Star Chart'},
  {value: 3, text: 'Laser Pointer'}
];

$scope.config = {
  create: true
}

Global Defaults

To define global defaults, you can configure the selectize injectable:

MyApp.value('selectizeConfig', {
  delimiter: '|'
});