bolasblack/.gitignore

## .gitignore
node_modules
index.js

## index.coffee
window.jQuery = require 'jquery'
window.$ = jQuery
Selectize = require 'selectize/dist/js/standalone/selectize'

Selectize.define 'editable_tag', (options) ->
  KEY_BACKSPACE = 8

  options = $.extend(
    text: (option) -> option[@settings.labelField]
    itemClass: '.item'
    isEditable: (option) -> not @isLocked
  , options)

  @_createItemWhenInputBlur = ->
    if @$control_input.val() and @editingTag
      @createItem null, false
      @editingTag = false

  @setup = do =>
    original = @setup
    =>
      original.apply(this, arguments)

  @onMouseDown = do =>
    original = @onMouseDown
    (event) ->
      $item = $ event.target
      return unless $item.is options.itemClass
      value = $item.attr 'data-value'
      itemIndex = @items.indexOf value
      if itemIndex >= 0 and itemIndex < @items.length
        option = @options[@items[itemIndex]]
        if options.isEditable(option) and @deleteSelection event
          @setTextboxValue options.text.call(this, option)
          @setCaret itemIndex
        @editingTag = true
        event.preventDefault()
        return
      original.apply(this, arguments)

  @onKeyDown = do =>
    original = @onKeyDown
    (event) ->
      itemIndex = @caretPos - 1
      if itemIndex >= 0 and itemIndex < @items.length
        option = @options[@items[itemIndex]]
        if options.isEditable(option) and event.keyCode is KEY_BACKSPACE and @$control_input.val() is '' and not @$activeItems.length
          if @deleteSelection event
            @setTextboxValue options.text.call(this, option)
            @refreshOptions true
          event.preventDefault()
          return
      original.apply(this, arguments)

  @setTextboxValue = do =>
    original = @setTextboxValue
    ($item, e) =>
      if not @_restoringUpdateItem
        @_restoringUpdateItem = true
        @_createItemWhenInputBlur()
        @_restoringUpdateItem = false
      original.apply this, arguments

Selectize.define 'no_suggestion', (options) ->
  $('body').append('<style>.selectize-dropdown{display: none !important}</style>')

$('.items').selectize(
  plugins:
    no_suggestion: {}
    editable_tag:
      isEditable: (option) -> option.value in 'aaa ccc'.split(' ')
  options: 'aaa bbb ccc ddd'.split(' ').map (t) -> text: t, value: t
  items: 'aaa bbb ccc ddd'.split(' ')
  createOnBlur: true
  delimiter: ',',
  persist: false,
  create: (input) ->
    value: input
    text: input
)

$('.item-creator').on 'keydown', (event) ->
  inputed = $(this).val()
  return unless event.keyCode is 13 and inputed
  # $('.items').data('selectize').createItem inputed
  selectize = $('.items').data('selectize')
  selectize.addOption(text: inputed, value: inputed)
  selectize.addItem(inputed)
  $(this).val('')

## index.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./node_modules/selectize/dist/css/selectize.css" type="text/css" media="screen" />

<input type="text" class="items" />
<input type="text" placeholder="Press Enter to add item to the input above" class="item-creator" />
<script src="./index.js"></script>
</html>

## package.json
{
  "name": "editable-selectize.js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "browserify": "12.0.1",
    "coffeeify": "1.1.0",
    "gulp": "3.9.0",
    "jquery": "2.1.4",
    "selectize": "0.12.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "browserify -t coffeeify --extension='.coffee' -o index.js index.coffee"
  },
  "author": "",
  "license": "ISC"
}
	window.jQuery = require 'jquery'
	window.$ = jQuery
	Selectize = require 'selectize/dist/js/standalone/selectize'

	Selectize.define 'editable_tag', (options) ->
	KEY_BACKSPACE = 8

	options = $.extend(
	text: (option) -> option[@settings.labelField]
	itemClass: '.item'
	isEditable: (option) -> not @isLocked
	, options)

	@_createItemWhenInputBlur = ->
	if @$control_input.val() and @editingTag
	@createItem null, false
	@editingTag = false

	@setup = do =>
	original = @setup
	=>
	original.apply(this, arguments)

	@onMouseDown = do =>
	original = @onMouseDown
	(event) ->
	$item = $ event.target
	return unless $item.is options.itemClass
	value = $item.attr 'data-value'
	itemIndex = @items.indexOf value
	if itemIndex >= 0 and itemIndex < @items.length
	option = @options[@items[itemIndex]]
	if options.isEditable(option) and @deleteSelection event
	@setTextboxValue options.text.call(this, option)
	@setCaret itemIndex
	@editingTag = true
	event.preventDefault()
	return
	original.apply(this, arguments)

	@onKeyDown = do =>
	original = @onKeyDown
	(event) ->
	itemIndex = @caretPos - 1
	if itemIndex >= 0 and itemIndex < @items.length
	option = @options[@items[itemIndex]]
	if options.isEditable(option) and event.keyCode is KEY_BACKSPACE and @$control_input.val() is '' and not @$activeItems.length
	if @deleteSelection event
	@setTextboxValue options.text.call(this, option)
	@refreshOptions true
	event.preventDefault()
	return
	original.apply(this, arguments)

	@setTextboxValue = do =>
	original = @setTextboxValue
	($item, e) =>
	if not @_restoringUpdateItem
	@_restoringUpdateItem = true
	@_createItemWhenInputBlur()
	@_restoringUpdateItem = false
	original.apply this, arguments

	Selectize.define 'no_suggestion', (options) ->
	$('body').append('<style>.selectize-dropdown{display: none !important}</style>')

	$('.items').selectize(
	plugins:
	no_suggestion: {}
	editable_tag:
	isEditable: (option) -> option.value in 'aaa ccc'.split(' ')
	options: 'aaa bbb ccc ddd'.split(' ').map (t) -> text: t, value: t
	items: 'aaa bbb ccc ddd'.split(' ')
	createOnBlur: true
	delimiter: ',',
	persist: false,
	create: (input) ->
	value: input
	text: input
	)

	$('.item-creator').on 'keydown', (event) ->
	inputed = $(this).val()
	return unless event.keyCode is 13 and inputed
	# $('.items').data('selectize').createItem inputed
	selectize = $('.items').data('selectize')
	selectize.addOption(text: inputed, value: inputed)
	selectize.addItem(inputed)
	$(this).val('')
	<!DOCTYPE html>
	<html>
	<link rel="stylesheet" href="./node_modules/selectize/dist/css/selectize.css" type="text/css" media="screen" />

	<input type="text" class="items" />
	<input type="text" placeholder="Press Enter to add item to the input above" class="item-creator" />
	<script src="./index.js"></script>
	</html>
	{
	"name": "editable-selectize.js",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"dependencies": {
	"browserify": "12.0.1",
	"coffeeify": "1.1.0",
	"gulp": "3.9.0",
	"jquery": "2.1.4",
	"selectize": "0.12.1"
	},
	"devDependencies": {},
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"start": "browserify -t coffeeify --extension='.coffee' -o index.js index.coffee"
	},
	"author": "",
	"license": "ISC"
	}