We're currently using the Chosen Dropdown Plugin which is rather awesome, apart from one minor issue. When we're using a single dropdown, if you tab into the 'chosen' control, the actual dropdown portion is not shown. However, when applying the plugin to a multiple 'select', it does appear.
Having been through the documentation and GitHub issues, there seems to be a lot of mentions regarding tab ordering and focusing, but nothing that seemingly deals with this rather simple requirement; Display the dropdown when receiving focus when tabbing.
So assuming that this functionality is not part of the plugin, is there an alternative such as capturing the focus of the anchor tag?
$('.chzn-single').focus(function(e){
alert('I should be focused!')
});
So far, I haven't been successful and was wondering whether any others have experienced this issue. You can check out this jsfiddle that demonstrates the problem
You should keep track of focus event for the search input thats inside chosen conainer, not the anchor element, then trigger mousedown event for the chosen container - that's the event that it listens to when opening a dropdown
You need to use delegated events approach to bind event handler to elements added dynamically (for jquery 1.7.1 and earlier you may just use 'live' method)
You also need to check if the container is active currently, to avoid recursive calls (when chosen dropdown gets opened - search input will be focused again)
$('body').on('focus', '.chzn-container-single input', function() {
if (!$(this).closest('.chzn-container').hasClass('chzn-container-active'))
$(this).closest('.chzn-container').trigger('mousedown');
//or use this instead
//$('#select').trigger('liszt:open');
});
Here's working jsfiddle
Instead of $(this).closest('.chzn-container').trigger('mousedown');
you may also trigger plugin's internal event: $('#select').trigger('liszt:open');
Related
I've noticed in many web applications that focusing on a select element and typing a relevant option value will provide much faster change event triggers rather than clicking (or navigating with arrows) and selecting from the dropdown. I've tried it in a few browsers with mixed but similar results.
Example
Example uses AngularJS with a filter: { prop: value }.
It appears the browser waits for the option to appear in the select element before firing the change event.
Is there any way to speed up the click / arrow nav approach? other than rolling your own select element.
I'm using this plugin called "Chosen" to turn my plain old select elements into a find as you type deal.
The problem is my existing page has code that fires when the select element comes into focus, and it seems to no longer fire.
Here's a place you can play around with some sample chosen code if you have any ideas you might want to test. (It's pretty similar to my own code so you can also see how it's implemented.)
that plugin does not seem to have callbacks, that is how i'd do that, instead of .focus() you pass what you need to do on a plugin callback that emulates that event, there is no event "focus" for the markup that the plugin generates.
I have a series of select dropboxes setup, with content that dynamically updates depending upon the preceeding selection. It works fine selecting in series.
When I try to go back to the top and start again, even though I have attempted to reset all children using
my_select.selectedIndex = 0;
The child select boxes remain unchanged. I had thought it was a Javascript error, but found the JSFiddle example actually worked, but my code within JQuery mobile does not work - leading me to believe it is a JQuery Mobile related issue
You can see a JSFiddle example at http://jsfiddle.net/vinomarky/xfcdF/
Steps to replicate:
Select 'Casing' from Type
Select 5 from OD
Change Type to Tubing
The JSFiddle example behaves as it should - resetting children to "-", while my 'live' JQuery Mobile example does not
Any ideas as to why?
You're manipulating the DOM behind jQuery Mobile's back but never telling jQuery Mobile that anything has changed.
You need to call the refresh method after you change the underlying <select>:
refresh update the custom select
This is used to update the custom select to reflect the native select element's value.If the number of options in the select are different than the number of items in the custom menu, it'll rebuild the custom menu.
So you need to add things like this:
$('#od').selectmenu('refresh');
at the bottom of your change handlers. The element to refresh does, of course, depend on which change handler you're in.
Demo: http://jsfiddle.net/ambiguous/n3VXe/
Your fiddle worked fine because it didn't use jQuery Mobile at all.
Also, you shouldn't be using onchange attributes in 2012, you're loading jQuery so you should use it to bind handlers to the events you're interested in. You might want to replace all your direct DOM manipulation with jQuery as well.
I have a system with a fast-changing set of items that may appear as options in select boxes. I could update the options themselves directly each time the data changes, but I'd rather simply fill in the options at the point where the user is about to see them. E.g. when it's about to open. Is there an event for this?
I suppose I could use the 'click' or 'mousedown' event, but what about navigating via the keyboard? There may be other cases too (perhaps)
BTW, I know how to add options to a select, the 'opening' event is really what I'm after.
Thanks,
Ben
You've got two choices: click() and focus() there are no others.
Use focus() and not click() because the click event does not give enough time to populate the drop down with new values which causes quirky behavior. Also the click event will only capture mouse clicks, with the focus() you get both mouse and keyboard focus events and also it gives ample time for the drop down to get populated with new data. Here is a fiddle with some simple experiments, try each function one at a time to see the difference.
If you're doing something like this, a select drop down probably isnt going to be the UI element of choice.
I would recommend changing to a jQuery UI Autocomplete widget; then you can simply serve items based on the query the user entered.
In addition, you can attach to the keyup event (or the focus event), and show a set of items at that point (as if the 'drop down' was clicked on) http://jqueryui.com/demos/autocomplete/#maxheight
I've read up on questions pertaining to detecting the state of a select menu, whether it's visible, open, or closed and the quick answer is that it's not universal and depends on what you're trying to do. My situation isn't covered by any of these answers 100%.
I need to determine when the select menu is closed, which currently works by storing a variable onblur; however, the select element does not lose focus on the first click off, but rather the second click off. Is there an event I can detect which occurs on the first click off? or make the select lose focus on the first click off rather than the second click off? Looking for pure JavaScript answers, no jQuery.
Here's some sample code demonstrating this: http://jsfiddle.net/BhnH9/1/
You can use a general click listener on the document (or some other suitable ancestor of the select) and see if the select element matches the document.activeElement. If so, then it has focus either because it just got it or an option has been selected.
However, there are other ways of selecting options than clicks, such as keyboard navigation. A click listener will not help you there.
Recently there was a comment on this thread, so I decided to take another look at the issue. I don't recall quite what the original circumstances were, but I do know that I needed the select drop down to lose focus after selected an item. So lo and behold, my jQuery solution... what with me saying it had to not be jQuery :) It's been a long time, I've switched jobs, and don't know why that was a requirement.
$('select').bind('change', function(e) {
$(this).trigger('blur');
});
$('select').bind('blur', function(e) {
alert('select lost focus');
});
Here's a JSFiddle: http://jsfiddle.net/7tUse/