selectize / selectize.js Goto Github PK

The docs state that plugins.js should contain the plugin code. I copy the code from dropdown_header into plugins.js but get multiple console errors.

What is the proper structure for loading plugins.

In our grid layout we give elements span* classes, similar to that of Bootstrap. Our original select element includes one of these so that we can create a nice and neat form layout.

When you apply Selectize however to the elements, the new element doesn't include any classes or original markup. Similar to the problem in #13.

Currently onChange only returns the value of the selected item. It'd be much more useful if it returned say, the object that is used to display the item, similar to how render.item works.

and postion it absolutely so that such problems of hidden dropdowns due to overflow hidden given to container is solved

After pressing the backspace key, the drop-down list needs to be refreshed. It shows an wrong option highlighted.

SYSTEM:

iPhone 4S (iOS 6.1.3) - Safari

REPRODUCTION STEPS:

Go to your website and look at the first demo ("Tagging"): http://brianreavis.github.io/selectize.js/

If I 'click' on the select area, it highlights itself briefly (as if Safari was going to give control to it) but then nothing happens.

COMMENTS:

After going through the rest of the demos on that same page, it seems like Selectize works fine as long as no text is being entered - i.e., any of the demos where it's just acting as a normal select are okay.

Perhaps this is expected, but I figured I'd mention it just to be safe.

If the original element is required, Selectize will correctly copy the property. If the user doesn't fill in the field and tries to submit the form, then the browser will try to focus the field to alert the user to their error.

Selectize doesn't seem to respond to this, resulting in a console error of An invalid form control with name='input_name' is not focusable.

It seems that the browser (at least Chrome) won't (correctly) send focus to hidden elements, so really Selectize needs to remove the required property from hidden fields and respond to a focus event.

I'm unable to interact (drag) the scrollbar on Chrome, Safari and Firefox on my Mac (haven't been able to test other browsers yet) .. The list closes as I try to click down on the scrollbar. I suspect it's an erroneously delegated eventhandler :)

Hope this hasn't been brought up already, I did scan for something similar.

Regards, Si

Suport for multiple languages.

Text to create new item is hardcoded english.

It would be nice to have reordering of items with drag and drop.

Like emails in Gmail's compose box.

This is a very helpful feature for production site.

Just an idea, have you thought about using TravisCI for building the main library upon a pull request?

http://brianreavis.github.io/selectize.js/ - the last example.

try to click on the scrollbar.

First our setup. We have an input box which we then apply Selectize.js to. Next to the input is a dropdown which effectively changes what type data we send in the load function. Also, we have an object containing several bits of information to control what data we send and what the templates are depending on the search type.

After typing a search query the callback is sent, but the data doesn't load, until you backspace everything in the input. The output of your results will then be listed.

You can see a video of this in action, here.

Related: #6

hello..
i'm a student, i'm in an internship periode and got job to develop a website.
i want to make a chained select like city-state. i use multi dimentional array from json encode to store category(id category, name) and type(id category, id type, name). if the category change, the type will change too, refer to which category selected.
can you teach me the simple javascript for steps of using onChange? i do this for few days, and still failed.

I have ran into a situation where I would like to change the offset top in different scenarios.

Here is the line in question:
https://github.com/brianreavis/selectize.js/blob/master/src/selectize.js#L1484

Can you think of any way of changing this dynamically based on theme or on initialization? I tried doing a top: 10px !important; but that breaks down if you have more selected than fits on one line.

When you select an option with selectize it changes the original select component adding an option with the selected value

for (i = 0, n = this.items.length; i < n; i++) {
                options.push('<option value="' + htmlEntities(this.items[i]) + '" selected="selected"></option>');
            }

I think the option component should reflect exactly how the original option was (including the label) so the user can query the select component and get the label and wherever data he wants from it.

A destroy method to complete remove Selectize from an element would be nifty. I'm currently cloning a div which contains three inputs, one of which is Selectized and although I'm cloning with both options of .clone as false, Selectized gets copied too.

So, I'd like to destroy it, then re-create it.

Can somebody explain why the jQuery plugin initializes selectize a text and value attribute with the same values? See here.

This is causing issues for us as our tags use one value for the tag label and another for the actual value which we send back to our server.

Surely something else should be occurring here?

When selectize applied to a select input, and a selection is made (with the keyboard or mouse,) the focus is lost. This makes it a pain to tab around the form, as after you select something the focus is set to the body element. Compare this with a native select input that keeps focus on the input after it has closed.

I've hacked together a bit of code that returns the focus to the input element, however it's not great. Perhaps the best way would be to insert an invisible element to take the focus after an item is selected?

$('#user_address_state').selectize({
  onChange: function(value) {
    console.log(value);
  }
});

when I select an option, this method is called twice, one with value being empty and a second time being the correct value.

dropdownDirection: "auto" | "up" | "down"

(handle within positionDropdown method)

so this is a minor feature request, I would like to have the option to change the string appears when user add a new attribute the is not in the list.
I already done this on my setup, since it's just adding (this.settings.new_string || 'Create ') where the 'Create ' is hardcoded and then give the selectize function 'new_string'

http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/47c5148f-a142-4a99-9542-5f230c78cb3b/

All selectize dropdowns with a scrollbar are unfortunately subject to this bug.

When I click an item to select it from the select dropdown, the item gets shown as selected, however the menu does not go away. It initially does, but pops back up right away. This can be seen with IE9 when going to the main example page: http://brianreavis.github.io/selectize.js/

Thanks.

Right now it's really easy to accidentally delete items... in some cases this is great (tagging), in other cases this is bad.

I have an issue with the events not getting fired when the element is in a modal. Everything is created as it should but clicking on it and typing does nothing.

Fix IE8 or create a list with compatible browser

It would be call to have selectize on npm, especially for those using CommonJS browser bundlers such as browserify.

A callback for when preloaded data has been fetched and added would be nice.

The value of the select element does not post to server on ajax post.

This error cause by calling function clear() in Selectize.prototype.addItem(). In clear() we call updateOriginalInput() with data = "" and then the input (select) is trigger change with val = "" so the value "" is posted to server.

When user change option in select, the change is envent is triggered twice (in clear() and addItem()).

I have a options (key => value) like this:

0 => option 0
1 => option 1
2 => option 2
3 => option 3

When a select has options like that, i can not select "option 0" because the data-value for "option 0" is empty

Selectize should support for option group (optgroup). Currently i can not render optgroup in selectize-dropdown.

Using a remote source is great and all, but some times that data may never change, or won't for a long time. How about an option to locally cache the returned data into Local Storage if it's available and use that source rather than fetching data all of the time.

On occasion isCmdDown stays true which means you can't enter the "A" key.
Will try and look into why

I tried to remove all options from a selectized select and couldn't find any function to help me. Is there any way?

Works great on touch devices, with one exception, there's no way to delete multiple selected items.

I have a selectize displayed in a dialog (jquery dialog http://api.jqueryui.com/dialog/).

If i set option {dropdownParent:'body'} for the selectize, then the dropdown isn't showed.

Look at my example:
http://jsfiddle.net/uZNhm/8/

I compose the item list by using a remote source. However, after I select an item, the virtual keyboard is still on.

I looked at the official demos and I found it not even activate the keyboard at all when the input is focused.

Tested on iPad mini and iPhone 4s, both iOS 6+.

Hope I did not do something wrong.

I have a select element which contains 10 static options, when using a remote data source in load these items get overwritten.

Selectize should respect the default content of its select element.

Currently Selectize doesn't preload any data, so when you're using a remote source and call addItem before you've manually typed anything, nothing will happen as the data hasn't loaded yet.

Obviously it'd be better to give this its own option, so you can decide if you want to preload anything or nothing.

Selectize.js doesn't respond to tabindex on a select element. As you can see in this demo.

Is there a way to keep both selects options in sync? I'm asking that because it's easier to work with the original select than with selectize select.

Original select:

var $select = $('select');

Selectize select:

var $select = $('select').selectize(options);
var selectize = $select[0].selectize;

in the function debounce_events where in line 77 of selectize.js / src / utils.js
there is no business of the 2nd param types, it unuse here, but it made me thought it does.

/**

• Debounce all fired events types listed in types
• while executing the provided fn.
  *
• @param {object} self
• @param {array} types
• @param {function} fn
  */
  var debounce_events = function(self, types, fn) {

I am looking into using Selectize in our application but I ran into a problem wich im not entirely sure whos fault this is...

When using a vanilla select I get:

When using a Selectize select I get:

Also in a Boostrap the Selectize box is under the content and creates a scrollbox.

I hope we can figure out what I can do to get this right I love the way Selectize works and looks =]