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.
Related
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');
I have a page which contains multiple HTML select dropdowns, and requires population onclick of the element. This population is done using an AJAX call in the click event listener of the select elements.
The reason for this is that performance and load are very crucial, and therefore they cannot be populated on page load.
Also, the design must use the native HTML select element.
I have created a jsFiddle demo to show the issue. When you click on the select the items are populated, and the width of the select increases as a result.
However the select only displays the initial option (prior to AJAX population).
------ View Demo ------
Demo uses setTimeout() of 50 milliseconds to emulate an AJAX response time.
How can I get this to populate onclick, and display correctly?
Is there a way of opening the select on callback of the popualation response?
EDIT: Alternatively, is there a jQuery plugin dropdown, which uses the browser's native theme for styling?
What I've tried so far
Populating the select on hover, however a quick user can open the select before the options have loaded. Also, if a user was to scroll all the way down the page, and over every select, this would cause a lot of unnecessary AJAX calls.
Changing the event listener to focus instead of click (as #AndyPerlitch suggested). However, this wouldn't work if the AJAX request took only 50 milliseconds to respond. (See Demo)
Changing the event listener to mousedown has the same effect as focus
UPDATE: This is not an issue in FireFox. select opens, then loads new items and displays them, all while in an open state.
Change the event to listen for from click to focus
Personally I would opt for a different approach completely, but it depends on you needs. Here I am assuming that the drop down will "almost definitely" be clicked (and thus loaded) at some point by the user.
With that in mind I would be tempted to populate the select lists using ajax as soon as the page is loaded. This has the benefit of being able to load the page quick (as there is still no "page load" list collecting) but it also means the ajax will most likely be complete before the user works out that they need to use the select list. I would even go an extra step and have temporary loading icons in place of the selected while the ajax is working it's magic (or disable them!) in case the ajax is having a slow day and the user is fast like superman.
of course, this all depends on how "set in stone" your requirement is to do the ajax load upon user interaction with the drop down element
or maybe this might prove some use?
The select will always display as it was before the click event started. You will therefore see only the initial option because you do the AJAX population after the click event started.
This may be a compromise for you but try to AJAX-populate before the click event. This may be:
-on hover, as you have done already (user has to scroll for the click anyway)
-an extra click for your users on an element neighbouring the select
Hide the drop down list and have something else in its place for the user to click on to trigger loading the drop down and displaying it.
I need to fire an event when a select option is selected (including reselected). I was using click in ie/FF but I realized there is no click event for webkit browsers. Change will not work for me since I need it when it is reselected as well. Is there a way I can achieve this functionality or do I need to replace the select with some sort of combo widget?
There is no one event that will get fired by all browsers on an option click. In IE an option click that doesn't change the select will fire no events at all. You can catch change on the select as well as click on the option in an attempt to get the event in any many cases as possible, but it won't be 100%.
If you have a drop-down where clicking an option has an effect even if it was already selected, what you have isn't really a select box. Selects are designed to choose one option from a list and if that's not what you want you shouldn't mark it up as a <select>. Try to shoehorn a bunch of actions or navigation into a select box and you'll face a wide range of usability and accessibility issues.
Instead, try a box full of buttons (for actions) or links (for navigation), which pops up when you click on an arrow-button. You can style it to look like a select if you like.
You could always try using onmouseup, or onfocus.
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/