lcdsantos / jquery-selectric Goto Github PK
View Code? Open in Web Editor NEWjQuery plugin for easy manipulation and customization of HTML selects
Home Page: http://selectric.js.org/
License: MIT License
jQuery plugin for easy manipulation and customization of HTML selects
Home Page: http://selectric.js.org/
License: MIT License
I was trying to hook onto the change event, do some actions and reset the value like so:
$('select').on('selectric-change', function(e){
//... do some other stuff
$(this).val("").selectric('refresh');
});
this causes an issue since the label is not updated until after the change hook completes.
$original
.prop('selectedIndex', currValue = selected)
.data('value', text);
_utils.triggerCallback('Change', _this);
// Change label text
$label.html(text);
I think changing the label should be called before triggering the event like so:
$original
.prop('selectedIndex', currValue = selected)
.data('value', text);
// Change label text
$label.html(text);
_utils.triggerCallback('Change', _this);
Thanks!
~Greg
I have this case where I couldn't scroll up the list, set the height
and overflow
to .selectricScroll
solved my problem.
.selectricScroll {
height: 300px;
overflow: scroll;
}
Plugin allows to select disabled options, when you open the list, click on the disabled option, then click back on the select wrapper to close it.
I think it's because too quick assignment of "selected=index" in condition in _select(index, close) method near line 419. Changing the selected value to index after checking if index option is not disabled seems to solve the problem.
Everytime a validation is ran on Angular, the class name of the select element changes. For example, if the select is required, angular adds the class ng-invalid ng-invalid-required
. Selectric only appends the initial class list, so if the method inside _init could be decoupled from it, and could be called from outside (like what happens with selectric('refresh')
), would account for this, or even include this on the refresh call, would be easier to have all the mutation in one go.
HTML Example Selectric + Angular 1.3:
<div class="selectricWrapper selectric-form-control selectric-ng-pristine selectric-ng-untouched selectric-ng-valid selectric-ng-valid-required">
<div class="selectricHideSelect">
<select required="" ng-options="s.value as s.text for s in user.data.sexo" class="form-control ng-untouched ng-dirty ng-valid-parse ng-invalid ng-invalid-required" id="billing:sexo" selectric="" ng-model="user.data.models.sexo" tabindex="0">
<option value="" class="">Selecione</option><option value="0">Masculino</option>
<option value="1" selected="selected">Feminino</option>
</select>
</div>
<div class="selectric">
<p class="label">Selecione</p><b class="button">▾</b>
</div>
<div class="selectricItems" tabindex="-1" style="width: 220px;">
<div class="selectricScroll">
<ul>
<li class="selected">Selecione</li>
<li class="">Masculino</li>
<li class="last">Feminino</li>
</ul>
</div>
</div>
<input class="selectricInput" tabindex="0"></div>
Hi! Nice plugin. Is the "Hover" event going to be supported sometime soon? Thanks
When clicking e.g. back and forth between two (or more) selects, selectric events stop to react to single clicks (e.g. to open or close). A repeated click is needed onward to trigger these events.
A page reload restores the first-click behavior again.
Visible also on official demos http://lcdsantos.github.io/jQuery-Selectric/ .
No JS errors reported.
Any recommendations? I've tried using jQuery-Validation-Engine here:
https://github.com/posabsolute/jQuery-Validation-Engine
and this:
https://github.com/jzaefferer/jquery-validation
Though it looks like since selectric "converts" the drop down list to an unordered list, anything that is trying to validate the form input in real time is going to fail.
Should I just go with a custom post-submit validator?
Thanks!
On regular selects, when the user hits the select key, it selects the item. With selectric, the enter is passed down to the form. It would be nice to have that work in selectric too.
First of all, thanks for the awesome plugin!
A tiny bug: after opening a dropdown, if you type to highlight a certain item and then click outside the dropdown (instead of pressing Enter), the found option will still be highlighted when the dropdown is opened again. The expected behaviour would be that the actual current selected item is then marked as selected.
Steps to reproduce:
Thanks!
eg: I have dropdown which is hidden and it is only activated when I click on links.
So I use selectric on page load and it is not calculating the width of selectricItems correctly coz it is hidden. Can you please look into it and provide fix
When you use the keyboard to navigate through the options in a drop-down, when you come to the end of the list and click the down arrow, the default behavior is to start over from the top. Is there any way to disable this functionality so that going to the end of the list is a "hard stop" so to speak? This more closely matches the native browser behavior for keyboard navigation in drop-downs.
The callback functions onOpen and onClose should provide the reference object for the select-element as parameter.
eg:
$('select').selectric({
onOpen: function ( theReferenceObjectForSelect) {
});
When enabling Selectric for mobile devices, the device's soft keyboard opens after clicking on a selectric select box. The is undesirable behavior. Is there a way to prevent the keyboard from popping up?
Thanks
It seems that the selectric plugin also affects normal input fields.
We have some legacy code that removes the value from an input. This works fine without selectric, but not with it:
$('.form_field_text, .form_field_textarea').focus(function() {
if (this.value == this.defaultValue){
this.value = '';
}
});
And this is the selectric call:
$(document).ready(function(){
$('.form-wrap select').selectric();
});
The HTML is this:
<div class="form-field ">
<input type="text" value="PHONE" title="PHONE" id="Phone" name="Phone" class="required valid">
</div>
Any idea why this would happen?
There is page with at least two selectbox.
p.s. Thanks for awesome plugin!
The plugin doesn't support the <optgroup>
tag. So something like:
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
produces an empty select box.
When using jQuery validation engine must remove class .validation[required] from .selectricWrapper.
jQuery('.selectricWrapper').each(function() {
jQuery(this).removeClass('validate[required]');
});
https://github.com/posabsolute/jQuery-Validation-Engine
Thanxx for fixing :-)
Hey, can you tell me is it possible to force the options list to show under the select box, and never above?
the selectric box does not take the width property of the initial selectbox, but it's own width defined in selectric styles. I took off the width property of the selectric style and that's OK if
the defined width is 100%, just as selectricResponsive.
This behavior causes me some problems, as on different pages I may have selectboxes of different widths, maybe one with fixed width of 150px, one other with 200px and so on.
If I declare a this is ignored. How can I solve it?
Hi, thanks for this great plugin.
Hope you don't mind, but I added an option that I wanted to share with you.
expandToItemText: true
}, options);
and then
// Calculate options box height
// Set a temporary class on the hidden parent of the element
visibleParent.addClass(tempClass);
// Set the dimensions, minimum is wrapper width, expand for long items if option is true
if ((!options.expandToItemText) || ($wrapper.outerWidth() - (options.border * 2) > $items.outerWidth()))
$items.width($wrapper.outerWidth() - (options.border * 2)).height() > maxHeight && $items.height(maxHeight);
else {
// make sure the scrollbar width is included
$items.css({ 'overflow-y': 'scroll' });
$items.width($items.outerWidth()).height() > maxHeight && $items.height(maxHeight);
// set scroll bar to auto
$items.css({ 'overflow-y': 'auto' });
}
// Remove the temporary class
visibleParent.removeClass(tempClass);
not sure if you care for this feature, but add it if you do :)
When I choose the mode openOnHover:true, I must wait 500ms before the select will be closed.
(line 202 https://github.com/lcdsantos/jQuery-Selectric/blob/master/src/jquery.selectric.js#L202)
How can i change this settings to close instantly the select ?
Thanks,
Hi Leonardo,
I started trying your plugin, actually just to style the drop down :) However, I need to know how to select a value manually using Jquery.
As this information is missing in the documentation, I just ask here.
Thanks for your work.
Kai
Step:
After that, the navigation on the keyboard does not work, search, too
You can see this in action by just visiting the demo page. While using Chrome or Safari on a Mac.
Click on any dropdown.
Instead of using the mouse to click a choice use the up or down arrow key.
First issue: The dropdown for the select element become visible on the page. Not the styled dropdown. The one for the actual element the styled one replaces.
Second issue: When you make a selection you can no longer tab out of the select box. You have to press the enter key or click somewhere else on the page.
Clicking enter will make the select element dropdown dissapear, but your selection will not be updated in the Selectric dropdown. If you press enter a second time it will update.
Clicking somewhere else on the page will update the Selectric dropdown, but not with you choice. It will instead always choose the next closest option.
Screenshot attached.
Hello! How dropdown can be cofigured to expand only downwards.
P.S. I don't know whether it's proper place to post this question.
Instead of one long div that displays a scrollbar, I would like to have 7 elements down plus to the right 7 more elements.
Can this be achieved with the recent version v1.6.7 of selectric?
Hello,
We have just add jQuery Selectric to twittstrap resources list
http://www.twittstrap.com/resources/details/jquery-selectric
Under : Forms
Regards
hey
is it possible to trigger the dropdown with onHover?
Hi !
Your plugin is great !
It's too bad that we can only apply it to the <select>
element.
What if we could use it with whatever we want ?
<ul class="selectric-list">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Sit</li>
<li>Amet</li>
</ul>
or
<div class="selectric-list">
<div>Lorem</div>
<div>Ipsum</div>
<div>Dolor</div>
<div>Sit</div>
<div>Amet</div>
</div>
and
$(function(){
$('.selectric-list').selectric();
});
Hi again,
Hope you don't mind, I just another feature I would like to share, its just another behaviour which is disabled items.
I use a placeholder which has attributes disabled="disabled" and selected="selected". also, any disabled item cannot be clicked.
selectItems[i] = {
value: $(elm).val(),
text: selectText,
slug: _replaceDiacritics(selectText),
disabled: ($(elm).attr('disabled')?true:false)
};
_$li += '
and the css
.selectricItems li.disabled { background: #F0F0F0; color: #888; }
.selectricItems li.selected { background: #EFEFEF; color: #000; border-top-color: #E0E0E0; }
.selectricItems li.hover:hover { background: #F0F0F0; color: #000; }
and disabled the click
function _select(index, close) {
// element is disabled, cant click it
if (selectItems[index].disabled) return;
not sure this is the best of implementations, but it works, again if you care for it by all means add it.
Thanks again for this nifty plugin :)
When I put into ‘option‘ tag the string containing HTML entities they are processed by browser. See the exaple screenshot:
http://kartinka.vtramvae.ru/7e48b8a19d407aeb2ed4e23ccab6.png
Hi. May I know when this plugin supports iPad? Right now the plugin does not seem to work in IOS devices.
Hello,
I'm new to angular and would like to customize with my selects.
Tried many things, have no idea how to past the values to angular.
The style is working, just can't transmit the value of the selected item to angular.
has no effect in mobile web browser
This plugin seems really nice and straightforward, but i would need the possibility also to add images in any list element, like for example adding a class. There is any demo or recommendation to achieve that?
Thanks
This lines https://github.com/lcdsantos/jQuery-Selectric/blob/master/src/jquery.selectric.js#L179-L181 make a persistent event leak that keeps adding the same mouseenter
and mouseout
over and over inside angular. it's best to treat it like other elements, and give it a bindSufix
, using on
instead of hover
, so the events can be detached.
http://plnkr.co/edit/n9GS0hECnIu2rrYYbu4d?p=preview
Check the events attached to .selectricWrapper
, there should be just one. So to make sure it doesn't create leaks, always call off(bindSufix)
to the element before attaching the same event name to it
EDIT: This actually stands true for all events that are bound inside _populate()
, they should be off()
ed. since Angular reuses elements, the events keep pilling until the UI starts to feel sluggish
After fix #46, hover effect still not work properly:
http://jsfiddle.net/f7cyf7k9/
I recorded demo with changed hover color to red (GIF 145KB):
It's about this line: https://github.com/lcdsantos/jQuery-Selectric/blob/master/dist/jquery.selectric.js#L207
Replaced classnames taken from original element. That causes error then using with libraries with class declarative (e.g. angular.js)
The over problem is using pluginName
instead of _this.options.customClass
for prefix
$original.prop('class').replace(/\S+/g, pluginName + '-$&')
There can be an option for this action enable by default.
ps. sorry for bad english.
The example showing icons is nice but hardcoded 6 images - this is not realistic.
I have the following code as an example:
B64.');background-repeat:no-repeat;background-position:right;background-size:16px auto;" value="'.$c->CountryId.'" data-apply='.$c->ApplyTax.' data-pricegroup='.$c->DefaultPriceGroup;
if($c->CountryId == $actualcountry)
{
echo ' selected';
}
echo '>'.$c->CountryName.'';
}
?>
which generates me the 200 or so countries of the world together with their flags.
Of course, this works, who wonders, only in Firefox and I am looking for a solution to replace the standard select. What do you think about?
... when selecting an option, if the select is also used optgroup to wrap the options.
I have temporarily fixed it so:
$(selector).find("optgroup option").unwrap();
$(selector).selectric();
Many thanks for this really useful plugin lcdsantos!
Everytime you do a 'refresh' the original select gets wrapped with another 'selectricHideSelect' div, over and over again. Should be checked if it's already 'wrapped' ;-)
Hi,
I am building Joomla template and getting following error:
Uncaught SyntaxError: Invalid regular expression: /[function (){for(var b=this.length,
a=Array(b);b--;)a[b]=q(this[b]);return a}]/: Range out of order in character class
I am using jquery 1.10.2, no other javascript libs included.
What could be wrong?
For some reason I can't get it to work with Magento. I get a syntax error on line 33 of jquery.selectric.js
SyntaxError: unmatched ) in regular expression
...s = s.toLowerCase().replace(RegExp('[' + d[k] + ']', 'g'), 'aeiouncy'.charAt(k))
Any ideas?
I have declared it this way:
$j(function(){
$j('select').selectric();
});
having a
var $j = jQuery.noConflict();
right after jquery load.
Allow for a default select option in the list by adding the "selected" keyword to the tag. Or perhaps adding a class to the option tag. Currently the default is the first option.
If tabindex is not specified on forms, everything seems to work as expected. However, if we set tabindex on the form items, the selectric dropdowns are ignored and won't focus until the end of the tab "flow". Make sense?
Hello,
is it possible to get the current reference-object within the onChange-event?
Like:
<select name="test1" class="test">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select name="test2" class="test">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
$(".test").selectric({
onChange: function(){
alert( $(this).val() );
}
});
Thank you
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.