selectize.js
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.
Selectize.js selectize is a jquery-based custom <select> ui control. it's useful for tagging, contact lists, country selectors, and so on.
I have an array of objects that is provided from a WebService (the order of the list is important). I loaded the JSON object into a Selectize control but it re-orders the list without using the order of the object.
This is the link of the current problem.
$('#testSelect').selectize({
maxItems: 1,
valueField: 'Id',
labelField: 'Descripcion',
searchField: 'Descripcion',
options: data
});
Fiddle here: http://jsfiddle.net/LYYab/
I have disabled the 'sortField' but it doesn't work.
Any help would be greatly appreciated.
Thanks.
Source: (StackOverflow)
I know how to set the optionList on Initiliaztion but how do I set it programmatically?
I have an inviteList Array.
$("#select-invite").options(inviteList);
Source: (StackOverflow)
Selectize.js allows to transform inputs into widgets with tagging, auto-complete etc.. I'm trying to add tag into input using code.
Here's what I have so far.
$(function() {
$("#tags").selectize({
create: true
})
var selectize_tags = $("#tags")[0].selectize
selectize_tags.createItem("foo")
selectize_tags.refreshItems()
})
http://jsfiddle.net/qDL37/
Unfortunately, “foobar“ isn't added to input box. As far as I know, it's the correct way to do it.
Could this be a bug in selectize.js? I tried to search through GitHub issues, but couldn't find anything like that.
Also I tried to read code of selectize.js, but no luck.
Source: (StackOverflow)
I was wondering, how could I get the value of the currently selected item in my Selectize.js input? I have checked the documentation and scoured everything selectize.js related on Stackoverflow but found nothing in the way of an example I could go off of. Any ideas? Here is what I figured would work based on the documentation, but instead gave me Undefined is not a function error.
Please note the very bottom of the code, where I use the select.on('change'; this (in addition to other API methods) is what I have tried. The on change works perfectly, but unfortunately nothing else has.
var select = $('#searchTextbox').selectize({
maxItems: 1, //Max items selectable in the textbox
maxOptions: 30, //Max options to render at once in the dropdown
searchField: ['text'], //Fields the autocomplete can search through. Example of another searchable field could be 'value'
openOnFocus: true,
highlight: true,
scrollDuration: 60, //currently does nothing; should say how many MS the dropdown and drop up animations take
create: false, //Whether or not the user is allowed to create fields
selectOnTab: true,
render: {
option: function(data, escape) {
var valueArray = [];
valueArray[0] = data.value.split(",");
var color = valueArray[0][0] == "1" ? "green" : "red";
return '<div class="option" style="color: '
+ color
+ ';">'
+ escape(data.text)
+ '</div>';
},
item: function(data, escape) {
var valueArray = [];
valueArray[0] = data.value.split(",");
var color = valueArray[0][0] == "1" ? "green" : "red";
return '<div class="option" style="color: '
+ color
+ ';">'
+ escape(data.text)
+ '</div>';
}
}
});
select.on('change', function() {
var test = select.getItem(0);
alert(test.val());
});
Source: (StackOverflow)
I am trying to increase the length of the dropdown list when using selectizeInput in Shiny.
I know I can set the max number of items shown by: options = list(maxOptions = n) but how could I define a minimum number of options?
Source: (StackOverflow)
I'm using selectize.js to style text boxes, and it's working fine.
$("select[name='somename']").selectize({
valueField: 'id',
labelField: 'name',
searchField: 'name',
options: selectableThings,
render: {
option: function(item, escape) {
return render(someTemplate, item);
},
item: function(item, escape) {
return render(someTemplate, item);
}
}
});
However I have a limited range of items and do not wish for the cursor (flashing |) to be enabled all the time. I've searched through the API docs and the source but can't find anything obvious.
Is there something inbuilt to disable the flashing cursor?
Edit originally has this as 'disabling input' but it looks like the cursor can't be used for input (and disabling input still shows the cursor).
Source: (StackOverflow)
I may have missed it in docs but I cannot find how to change the "Add" word in options. Is it possible?
@Shiva - I looked through the code on github but haven't found the answer to my question.
My code is following:
<div class="sandbox" style="width: 200px">
<input id="input-tags" class="demo-default selectized" type="text" tabindex="-1" style="display: none;">
<div class="selectize-control demo-default multi">
<div class="selectize-input items not-full has-options has-items" style="display:none">
<div class="selectize-dropdown demo-default multi" style="display: none;">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#input-tags').selectize({
valueField: 'id',
labelField: 'name',
searchField: 'name',
plugins: ['remove_button'],
createOnBlur: true,
delimiter: ',',
persist: false,
hideSelected: true,
onChange: function(input) {
console.log(input);
},
create: true,
load: function(query, callback) {
if (!query.length)
return callback();
$.ajax({
url: $('#selectizeUrl').val()+"/term/"+query,
type: 'GET',
dataType: 'json',
error: function() {
callback();
},
success: function(res) {
console.log(res);
callback(res);
}
});
}
});
});
</script>
Source: (StackOverflow)
I am trying to solve a bug in our tests that in my opinion should be working. I am pretty sure it's a bug in selectize or capybara, but I can't figure out why.
I have gone into the source for capybara and everything seems like it is working like it should. I am not really sure how to move forward.
To test this bug I have stripped down the bug as much as possible into a little test application. See the setup below
bugs/show.html.erb
<select id="select-repo" class="repositories selectized" placeholder="Pick a repository...">
</select>
<select id="dropdown1">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<select id="dropdown2">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
bug_spec.rb
feature 'bug' do
it "spec setup", js: true do
visit bug_path
find('div.selectize-input input', match: :first).set('exercism.io')
select 'Four', from: 'dropdown1' # this is not getting selected
select 'Four', from: 'dropdown2'
sleep 2
expect(page).to have_select('dropdown1', selected: 'Four') # testing that dropdown1 is being selected
end
end
# note that the javascript to initialize the selectize drop down is in application.js if you want to look at it go to the github application.
The test above visits the page that has an ajax selectize drop down and two normal select elements. It attempts to put the text - 'exercism.io' - in the selectize drop down (usually I have another line to actually mimic pressing the enter key, but bug happens with out that line) and then it carries on to set the value of dropdown1 and dropdown2. I have made the test js: true and sleep 2 to get the ajax working and so you can see what is actually happening when the test runs.
The problem is it fails to set dropdown1's value. When you run the test and see what's happening you can see that it finds the value to set, but it doesn't actually set it. It just moves onto the next select.
Another weird thing is if I change the test as below, the test passes. So I am pretty sure it's got soemthing to do with the setting of the selectize drop down.
bug_spec.rb
feature 'bug' do
it "spec setup", js: true do
visit bug_path
select 'Four', from: 'dropdown1' # this is not getting selected
select 'Four', from: 'dropdown2'
find('div.selectize-input input', match: :first).set('exercism.io')
sleep 2
expect(page).to have_select('dropdown1', selected: 'Four') # testing that dropdown1 is being selected
end
end
I have replicated this bug in a demo application that can be found on github.
Sorry if this is long, I wasn't really sure how else to word this question.
Note that this example is stripped down. In my actual code I use code that guys have provided to use capybara and selectize together.
Source: (StackOverflow)
I have a form from which I would like to copy some default values into the inputs. The form inputs are using the selectize.js plugin. I would like to set some of the form values programatically. The standard way of doing this:
$("#my_input").val("My Default Value");
does not work.
I have tried something like this but it does not work either.
var $select = $("#my_input").selectize();
var selectize = $select[0].selectize;
selectize.setValue("My Default Value");
Any ideas? It's got to be easy :) I'm missing it.
Source: (StackOverflow)
I want to limit minimum 3 characters for Selectize tags input. Is it possible? is there any event in selectize?
Source: (StackOverflow)
Is there any way to detect empty search result when working with Selectize.js?
If user types something and if they do not get the content from dropdown list, is there any way to detect the empty searches?
Source: (StackOverflow)
I installed the "selectize-rails" gem into my rails app, and I'm trying to get it to work. I keep getting this error in my web console:
TypeError: $(...).selectize is not a function
and nothing happens in the browser. Here's the code I have so far, following the "Email Contacts" example from this page: http://brianreavis.github.io/selectize.js/
views/emails/new.html.erb
<script type="text/javascript">
$(document).ready(function() {
console.log( typeof $.fn.selectize === 'function'); // true
console.log( $('#select-to').length === 1 ); // true
var REGEX_EMAIL = '([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@' + '(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)';
$('#select-to').selectize({
persist: false,
maxItems: null,
valueField: 'email',
labelField: 'name',
searchField: ['name', 'email'],
options: [
{email: 'brian@thirdroute.com', name: 'Brian Reavis'},
{email: 'nikola@tesla.com', name: 'Nikola Tesla'},
{email: 'someone@gmail.com'}
],
render: {
item: function(item, escape) {
return '<div>' +
(item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') +
(item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') +
'</div>';
},
option: function(item, escape) {
var label = item.name || item.email;
var caption = item.name ? item.email : null;
return '<div>' +
'<span class="label">' + escape(label) + '</span>' +
(caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
'</div>';
}
},
createFilter: function(input) {
var match, regex;
// email@address.com
regex = new RegExp('^' + REGEX_EMAIL + '$', 'i');
match = input.match(regex);
if (match) return !this.options.hasOwnProperty(match[0]);
// name <email@address.com>
regex = new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i');
match = input.match(regex);
if (match) return !this.options.hasOwnProperty(match[2]);
return false;
},
create: function(input) {
if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) {
return {email: input};
}
var match = input.match(new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i'));
if (match) {
return {
email : match[2],
name : $.trim(match[1])
};
}
alert('Invalid email address.');
return false;
}
});
});
</script>
application.html.erb
<head>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<%= javascript_include_tag "jquery.endless-scroll" %>
<%= yield(:head) %>
</head>
javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap
//= require turbolinks
//= require selectize
//= require_tree .
Selectize.js seems to be included in my application: this is the <head> from my page source:
<!DOCTYPE html>
<html>
<head>
<!--...-->
<link rel='nofollow' href="/assets/selectize.css?body=1" media="screen" rel="stylesheet" />
<link data-turbolinks-track="true" rel='nofollow' href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" rel='nofollow' href="/assets/custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" rel='nofollow' href="/assets/jquery-ui.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" rel='nofollow' href="/assets/jquery-ui.structure.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" rel='nofollow' href="/assets/jquery-ui.theme.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" rel='nofollow' href="/assets/users.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/sifter.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/microplugin.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/selectize.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.color.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.endless-scroll.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/users.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="KjspKaF93jfFsjf8jsoaisHSf=" name="csrf-token" />
</head>
Gemfile:
source 'https://rubygems.org'
ruby '2.0.0'
gem 'rails', '4.0.10'
gem 'bootstrap-sass', '~> 2.3.2.0'
gem 'sprockets', '~> 2.12'
gem 'chosen-rails'
gem 'bcrypt', '~> 3.1.7'
gem 'therubyracer'
gem 'sass-rails', '4.0.5'
gem 'uglifier', '~> 2.1.1'
gem 'coffee-rails', '~> 4.0.1'
gem 'jquery-rails', '~> 2.3.0'
gem 'turbolinks', '~> 1.1.1'
gem 'jbuilder', '~> 1.0.2'
gem 'libv8', '3.16.14.7'
gem 'yaml_db_improved'
gem 'selectize-rails'
group :development, :test do
gem 'sqlite3', '~> 1.3.8'
gem 'rspec-rails', '~> 2.13.1'
end
group :test do
gem 'selenium-webdriver', '~> 2.35.1'
gem 'capybara', '~> 2.1.0'
end
group :doc do
gem 'sdoc', '~> 0.3.20', require: false
end
group :production do
gem 'rails_12factor', '~> 0.0.2'
end
config/environments/production.rb:
Website::Application.configure do
config.cache_classes = true
config.eager_load = true
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
config.serve_static_assets = false
config.assets.js_compressor = :uglifier
config.assets.compile = false
config.assets.digest = true
config.assets.version = '1.0'
config.log_level = :info
config.i18n.fallbacks = true
config.active_support.deprecation = :notify
config.log_formatter = ::Logger::Formatter.new
end
config/environments/development.rb:
Website::Application.configure do
config.cache_classes = false
config.eager_load = false
config.consider_all_requests_local = true
config.action_controller.perform_caching = false
config.action_mailer.raise_delivery_errors = false
config.active_support.deprecation = :log
config.active_record.migration_error = :page_load
config.assets.debug = true
end
config/application.rb:
require File.expand_path('../boot', __FILE__)
require "active_record/railtie"
require "action_controller/railtie"
require "action_mailer/railtie"
require "sprockets/railtie"
Bundler.require(*Rails.groups)
module Website
class Application < Rails::Application
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
end
end
Does anyone who has used Selectize know what I might be missing?
UPDATE:
It gets weirder: Error-prone code randomly started working, but then broke again upon refresh
Source: (StackOverflow)