groenroos/minimalect

Minimal select replacement for jQuery

minimalect's Issues

add option

it's possibile to implement a method to add a new option?
Let me explain: I have a long list, start typing to search one option but it is not in the list.
I'd like to add that option to submit it in the form.
is it hard? or anyone can suggest me a workaround?

Add a link to your repo description for demos

Please, add in you repository description a link to http://groenroos.github.io/minimalect/

Found your plugin via Github, but need to search for your usage examples.

Multiselect integration.

Select elements that have multi selection option cannot be used with minimalect.

Placeholder in IE9

How do you get the placeholder text to appear in IE9? Does the script include a polyfill? I'm using Minimalect on a site, and the placeholder doesn't appear in the dropdown.

But I have other elements on the page with placeholders which I'm using http://mths.be/placeholder to polyfill and they appear OK.

Placeholder to get value from first element

Pretty often, programmers set the first option to some default value, such as "--Select--" or something like that - the placeholder can be improved to get the value from the first option, if the user wants to. The quickest fix that comes to mind is changing

this.wrapper.append('<input type="text" value="'+(this.element.find("option[selected]").html() || "")+'" placeholder="'+(this.element.find("option[selected]").html() || this.options.placeholder)+'" />');

to

this.wrapper.append('<input type="text" value="'+(this.element.find("option[selected]").html() || "")+'" placeholder="'+(this.element.find("option[selected]").html() || (this.options.placeholder != null ? this.options.placeholder : this.element.find("option:first").html()))+'" />');

in which case, calling minimalect with placeholder: null, e.g.

jQuery("select.minimalect").minimalect({placeholder: null});

will do the trick.

Of course, you may decide to implement it in a different way, e.g. a separate setting, or getting the value from some of the select attributes. The main aim is to be able to set it globally, but not with the same value for all select elements.

Can't select item with keyboard when part of a form

Hi, I may be overlooking something really obvious but as soon as I put on of these fields inside a

I can no longer select items with the keyboard. I can navigate to them find with arrow keys but, as soon as I press enter it attempts to submit the form.

Any ideas?
Thanks

Don't open the select on focus

The select box shouldn't open when focusing the control. It should still open when clicking on it, but not by focusing it without it being clicked (or tapped). What's more - the reverse doesn't work either, defocusing doesn't close the select.

TypeError: this.options is undefined

I am wanting to enable groups in the options list.

In my script I append the following html to an element and then call minimalect afterwards (i've left it as a string in this snippet in case the format has caused the issue):

<select id=\"my_select\"><optgroup label=\"my playlists\"><option selected=\"selected\" value=\"v1\">v1</option><option value=\"v2\">v2</option><option value=\"v3\">v3</option><option value=\"v4\">v4</option><option value=\"v5\">v5</option><option value=\"v6\">v6</option><option value=\"v7\">v7</option><option value=\"v8\">v8</option><option value=\"v9\">v9</option></optgroup></select>

The HTML produced by the append is correctly formed ie:

<select id="my_select">
<optgroup label="my playlists">
<option selected="selected" value="v1">v1</option>
<option value="v2">v2</option>
<option value="v3">v3</option>
<option value="v4">v4</option>
<option value="v5">v5</option>
<option value="v6">v6</option>
<option value="v7">v7</option>
<option value="v8">v8</option>
<option value="v9">v9</option>
</optgroup>
</select>

I'm getting this error in Firebug:

TypeError: this.options is undefined (line 317, col 5)

Line: https://github.com/groenroos/minimalect/blob/master/jquery.minimalect.js#L321

And it halts the page, minimalect and other scripts loading.

$("#my_select").minimalect({placeholder:"choose playlist", searchable: false});

The plugin works if there is no <optgroup>.

Using jquery.minimalect.js 0.9, same error in jquery.minimalect.min.js 0.8b.

Understanding of default style

Hello everyone,

I'm trying to get the bubble unopened style for my selects. In other words the black font-color when the select isn't open just like in the demo page here (http://groenroos.github.io/minimalect/)

At the moment the select look I have is the "Default Theme" look. Can someone point to me what css rule I need? I looked at the page over and over and I just don't see the css style that is being applied that makes the color lighter?

Thanks
Christian

Placeholder null and validation

Hi,

I'm having this issue: if I set placeholder: null, instead to show the first option is show the word null !!!
Anyone has an explanation?

Another thing, I would like to validate the form, I'm using Abide validation from Foundation Zurb, but it doesn't really work together with minimalect.
If i put the required tag on the select, how it should be, then the display none from minimalect will break the validation.
Anyone has experienced this before?

Thank you

Does not support disabling options

The plugin does not allow options to be disabled, e.g.:

<select>
   <option value="a">A</option>
   <option value="b" disabled>B</option>
</select>

In the code above, the second option should not be possible to select.

Include a non min css for concatenation

To include a non min css for concatentation

Problem with navigation

Hello, I have troubles when I write in the replaced select. I write a letter to navigate through the options but the letter is inmediatly deleted.

including onHover

hey
rather than onClick, is it possible to display the list onHover

When option is selected no change occurs

Is this a known issue? I've noticed that when an option is selected, it doesn't seem to recognize that selected option and nothing happens.

Thanks!

html entities in option values cause error

I have an option value that contains the HTML entity

    " 

For some reason, this is being converted to the non-entity quotation mark (a literal quotation mark) and causing an error in the minimalect javascript.

It shouldn't work on small screens

Small screens usually have a very different UI for select elements, and this component would forcibly override that. It is common/best practice to use proper native UI elements when they exist for usability and accesibility.

Select Event not trigger

Hi Friend,
i am facing the issue of onchange function calling. while click on the li item...

Thanks,
Rahul

No searching?

Is there a way to configure Minimalect to not use the search functionality? I love the clean markup and easy styling, but I'm looking for something that emulates the default <select> functionality.

minimalect dropdown is editable

I am able to search in dropdown and i want to disable this features like textbox is also generated. i want to disable this textbox

Setting selects for minimalect when used in jQuery dialog

Hi,

I've problems with the minimalect when used inside jQuery UI dialog. The problem seems to come from the fact that even though I'm setting the select value by doing $(.mySelect).val("xx") the selected attribute is not being added.

The solution I have is to manually handle the initilization of the selected option for each select each time I open a dialog?!? I tried adding a hook in minimalect afterinit function, but it seems the minimalect object isn't inserted in the DOM at that point.

Doesn't anyone have a solution or suggestion that wouldn't require setting the selected attributes on top of setting the value?

Thanks
Christian

selected option not working on Chrome

URL: http://jsfiddle.net/T6Vxw/

i been fighting with this for a few days, for some reason this happen only on chrome
anybody has a clue on this? or has resolved this?

thank you!

Regex error when filtering

When typing a "" it causes a regexp filtering error. Possibly the same with other characters. I don't have any regexp knowledge to fix this.

Toggle dropdown open/ close?

At the moment, it's only possible to toggle the dropdown by clicking on the arrow, is it possible to make the whole container react this way?

Thanks

Theme issue: Rem positioning doesn't work in IE9/10.

The rem positioning of the arrows in your default themes doesn't seem to work, which is odd because IE9 and 10 both support rems. Maybe this positioning would be better handled by percents?

Attaching event after the select is initialized is not working

Firstly I would like to make all selects 'minimalect' at once (global.js)
$("select").minimalect();

Then Individually add events in the corresponding html/jsp pages
$("#caseSelect").minimalect({
onchange:function(v,t){
alert(t);
}
});
This does not fire onchange event!

Re: Issue 45

In the jsfiddle you made, it seems the populate works fine, though when you try to select something in the second menu, it doesn't hold the value clicked on. Any ideas why this would happen? I'm in Chrome at the moment.

Dynamically adding <option>s to the select element seems buggy

$("#myselect optgroup").eq(0).append('<option value="Foo">Bar</option>');
$("#myselect").change();

^^ Successfully adds an to the end of the first in a selectbox. This also updates the Minimalect dropdown, but only the FIRST TIME.

Subsequent calls (with different option value/text pairs) just don't work. IE, the option just doesn't append in Minimalect.

What's the recommended procedure for adding/removing/updating options in a select that's being bound to Minimalect, or is this just a bug?

Non-unique value causing multiple selection

If the option value is not unique then it causes multiple options to be selected.

See this fiddle http://jsfiddle.net/a90wqg27/ and try selecting Bicycling, mountain, general and Bicycling, BMX will also be selected.

It is valid to have multiple options with the same value so you might want to add a unique identifier to the option using a data attribute to keep track of each option rather than assuming that the values will be unique.

In this case I could easily work around the issue by using <option data-value="x"> and fixing it with javascript but it would be nice to not have to do that.

Proposal: Setup Gruntfile.js

Will you like a Gruntfile.js to build the libraries?

Up/down arrow keys in Opera

Normally in Opera, the up/down keys cycle through personal data entered in the preferences and the notes. This is also the case in minimalect, and should be supressed (this is in fact possible, but I don't know how from the top of my head). Other browsers might have similar functionality - this too should be tested thouroghly when catching "system keys" like arrow keys.

Request: Send in the element on onchange

I have several selects on my page, and I just loop through them to create minimalects. But when they are changed I need to know which one was changed.

//this would be really nice
opts.onchange = function(val, text, elm) {}

what about dynamically added selects?

Is there a solution to make this work with dynamically added select elements?

I know there is no insert event (and also no one you should use like 'DOMNodeInsertedIntoDocument') i can listen for like this:

<div id="container"></div>

$('#container').on('insert', function(){
    $(this).find('select').minimalect();
});

anybody an idea how to handle this?

Removing traces of Minimalect instance, then re-applying results in nothing

I have a subcategory select which is populated with new options each time the category select changes its value.
On each change, I:

• clear the subcategory select
• re-populate it
• check if the following element has the .minict_wrapper class
• remove it
• reset the for= attribute of the parent label
• re-apply the Minimalect plugin

But then nothing happens.. I would expect at least an error or something, but I'm left in the dark. Any idea on how to handle this properly?

Propose: Add a bower.json

I will like to propose this component to prepare a bower.json to be compatible with bower.

Thanks
Ian Lim

Uncaught TypeError: Cannot read property 'class_group' of undefined

I've error Uncaught TypeError: Cannot read property 'class_group' of undefined since 0.9.
See http://jsfiddle.net/4kcUs/. Even example from the page doesn't work: http://jsfiddle.net/4kcUs/1/.

Dynamically add options to minimalect based on other select?

So I'm trying to chain a number of select menus together. Ie. Selecting a option will dynamically populate another select. Standard select boxes, easy peasy. But what about dynamically populating a minimalect-ed select?

Is there easy way of changing size?

IE Bugs

On IE10 the arrow is not well positioned.

Multiple selects not opening

I tried to use multiple select elements but none of them won't open using v0.9

http://codepen.io/anon/pen/sHmei

I switched to v0.8b and they open fine

http://codepen.io/anon/pen/twciH

Maybe it is something completely obvious I'm missing. Thanks in advance and sorry about the noob display.

I would like to check whether its first element or not on Change.

Please find the Code below
select option umar farook shaik

           <script>
        $(function(){
            $("select").minimalect();
            $("#myselect").on('change',function(){
                alert(this.value);
            });
        });
    </script>

this.value gives the Selected Value, In minit wrapper, adds minit_first class, i tried to find using this but not succeeded.

Bubble theme items overflow container

Hi there,

I noticed that if there are many items, the bubble theme list items overflow the container. If you set overflow: hidden/auto on the UL then the arrow icon at the top disappears as it is part of the UL container.

Be great to have a fix.

Thanks!

Not making a new selection hides the previous one

If I simply close the menu apparently the DOM element (li) keeps its "selected" status/attribute but i it does not get displayed anymore, and I don't think that should happen.
The select box reverts to the default placeholder text as soon as one clicks on the element itself, and I don't think that should happen either.

Thoughts?
Thanks a lot!

After changing programmatically the option cannot be changed manually.

Hello! Great project, Just trying it out and ran in to an issue.. After using .val().change() on the original select, the value is updated but then is locked in place and cannot be changed by the user.

I'm using Chrome 26 on Mac, try the following code on your example page:

$('#example2').val('bmw').change();

After executing the above the select is updated as expected, but then cannot be changed by the user.

wr element becomes event

Hi

this.element.on("blur", m._hideChoices) seems to send blur event as parameter wr, instead of the wrapper element.

This happens when I re-activate the plugin after a show / hide of select element removes the minimalect.
I re-activate it with:
$('select').minimalect({remove_empty_option:false, live:false});

add version tags so it is available via Bower

Can you add version tags so that we can install this via Bower? Currently it has no version tags so we get a "No versions found" error.

Thanks!

minimalect this.options.onchange add origin

What i did was added another parameter to:

selectChoice: function (e, t, n, r, triggeredByInputChangeEvent) {

which will execute in last row:

this.options.onchange(e.attr("data-value"), e.text(), triggeredByInputChangeEvent)

in the t.element.on('change')

t.selectChoice(t.wrapper.find('li[data-value="' + t.element.val() + '"]'), t.wrapper, t.element, t.options,true)

so now i know in my code:

$(el).minimalect({
            onchange: function (value, text, triggeredByChange) {
                if (!triggeredByChange) /*triggeredByChange is custom code added in minimalect query*/
                    $(el).trigger('change'); //Make change being triggered
            }
        });

so i fixed that change event on hidden select field will only be triggered once, BUT will be triggered!

hope you can implement something like the same in your code: keep the original events working, please 👍 :)

Submit form doesn't send selected data

Hi,
I'm facing this problem when I try to submit a form, the POST (also GET) doesn't send the data selected but just the "default" value of the select options.

Anyone already have this issue?

Proposal : Add test cases to this great library

Should the test cases in mocha or jasmine?

Original Select Not updated with 'selected'

Is there any reason the original select element wouldn't get updated with the 'selected' attribute?

I've tried getting clever with the "onchange: ->" callback to manually update but it doesn't seem to get what the current context is if you use a class to instantiate the drop downs on multiple select boxes.

aka $(".selectMe") to convert 4 elements...