I am in the process of converting an old client/server app to a web browser-based application, and have an issue with the standard HTML SELECT element. Users of this app enter search term/operator pairs to construct a search on a large database (see sample markup below).
<input type="text" id="txtTerm1" />
<select id="selOp1">
<option value=""></option>
<option value="or">Or</option>
<option value="near">Near (any)</option>
<option value="near2">Near (within 2 words)</option>
<option value="near4">Near (within 4 words)</option>
<option value="before">Before (any distance)</option>
<option value="before2">Before (within 2 words)</option>
<option value="before4">Before (within 4 words)</option>
</select>
A search term is entered into txtTerm1, and then TAB or ENTER is pressed to move to selOp1. The users like to use the keyboard exclusively to choose an operator from selOp1. When they quickly press "n", the select control iterates through the "near" options perfectly. But if the user then decides they want to switch to "Or" and types "o," the control does not select the "Or" option.
Test: Type n,n,n,n,n,o in rapid succession
It seems that if you type quickly and then change characters, the SELECT element groups the two characters together, "no" in this case, and does not find an OPTION with that text. If I wait a few seconds after typing the n's and then press o, it works. But this slows the users down and is confusing. This behavior seems to be the same in Chrome, Firefox and IE.
The question:
Is there a way to force a SELECT to only use the first character of the OPTION text when trying to locate an OPTION with the keyboard? Or does anyone have any other clever solutions? Any advice is greatly appreciated.
Related
I am running an application where users can select categories for a selected field:
example: user-selected field = 'country' then the user can select 'country names'(India, China, America etc.) in the dropdown.
This works well when categories have unique values less than 15(this may vary). But when users need to select more than 15 categories it becomes very difficult for the user. I wanted to know what are the best possible solutions to ease this process?
example: user-selected field 'city' now users want to select 200 city names from the dropdown.
It can be a box where user can paste comma sepearated category values and we can auto fill these in dropdowns, or a simple file upload.
Please let me know your thoughts.
maybe not make a dropdown but a input field and validate it via options list (like in dropdown but type-to-select) small example:
<input list="id"></input>
<datalist id="id">
<option value="USA"></option>
<option value="GERMANY"></option>
<option value="RUSSIA"></option>
<option value="CHINA"></option>
<option value="FRANCE"></option>
<option value="INDIA"></option>
<option value="UK"></option>
</datalist>
hope this helps =] if you dont know how it works - copy it to any html file to tag and just use on custom page to understand =]
I think the best solution will be to give the user a text box, where the user can paste comma-separated values and we can extract and auto-select the defined values.
I've a mysterious problem. I've built a browser-based application for a customer who prefers to use the keyboard - no mouse, no touch panel.
I have a simple HTML-Form like this which contains some times:
<input tabindex="1" name="abc" type="text" />
<select tabindex="2" name="efg">
<option value="10:00:00">10.00</option>
<option value="11:00:00">11.00</option>
<option value="12:00:00">12.00</option>
<option value="...">up to 24</option>
</select>
now my customer recognized that it's not possible to select the "11.00" option using keyboard. E.g. after hitting "TAB" and jumping to "select" you can enter "10" on the numblock of your keyboard and the option "10.00" is selected. It's possible on any time, except "11.00" and "22.00". Hitting the key "1" or "2" twice the pointer always jumps to the next option (e.g: twice "1" -> 12.00 is selected)
I've checked this behavior on any major browser under Linux and Windows: Everywhere the same issue.
jsFiddle
Is there an option to fix the problem?
Assuming you don't have any JavaScript interference, this select should be totally usable with only a keyboard with the default browser behavior. Once you have selected a dropdown using tab, you can:
Type a character to jump to the first option that starts with this character
Type the character again to jump to the next option that starts with this character (and so forth)
Use the up and down arrow keys to navigate through the options
Use the enter key, spacebar, or Alt + Down to expand the list of options
Use Alt + Up to collapse the list of options
Collapse the options by using Tab to jump to the next focusable element.
I dropped your sample HTML into a clean webpage, and everything worked as I expected. I'd check to see if you have any JS that is capturing the relevant keypress events.
What I have in my code right now:
<select>
<option value="...">Dr. Steve 555-222-9393</option>
<option value="...">Jim 333-999-1111</option>
<option value="...">New Emergency Services 0118-999-881-99-9119-7253</option>
</select>
It looks bad, and after a few dozen entries it's very, very hard to read.
What I'd like is to emulate a dropdown by using a table and then displaying just one row of the table at a time (with the currently selected row's value stored in a hidden input).
The question: before I start writing it myself, has someone already done this (in any library)? I've been going through the jquery plugin registry and there are plenty of plugins for converting <ul> to behave like <select> and tons to create fancy multi-selects. (Some of these might even work, if you could disable the multi- part. SE's own Tags input has pretty fancy formatting in its "dropdown".) But if there's one that can turn a <table> (or anything else) into a select-with-columns, it's lost in the noise.
Note: I've found a number of related posts that suggest using monospace fonts and padding to line data up in a plain select tag, but I'd like to think it can be done better, especially after seeing jquery plugins like Chosen.
I wasn't able to find anything that could convert a table to a dropdown with columns but I was able to use SelectBoxIt's data-text attribute to fake it with inline-block:
<select>
<option value="1" data-search="555-555-5555 Bob" data-text="<span style="display:inline-block; min-width:10em; margin-right:1em;">555-555-5555</span><span style="display:inline-block;">Bob</span>"></option>
<option value="2" data-search="444-444-4444 Steve" data-text="<span style="display:inline-block; min-width:10em; margin-right:1em;">444-444-4444</span><span style="display:inline-block;">Steve</span>"></option>
</select>
data-search is required in order for type-to-search to work (otherwise, it appears to expect the user to type the HTML as it appears in data-text). More work would be needed to make the columns line up if someone really entered a phone number like 0118-999-881-99-9119-7253.
What I want is that the text box is only accessible if a certain option is picked from the drop down menu and i have a html form as below:
<tr>
<td>a. Did any of your staff participate in training or orientation sessions related to any aspect of social performance management, during the reporting year?
<td >
<select name="mfi_4_a_i">
<option>Please choose one.</option>
<option>Yes</option>
<option>No</option>
<option>No, but planning in future</option>
</select>
<p>if not,and not planning please explain why not?</p>
<input type="text" name="mfi_4_a_ii" class="init" disabled="disabled"/>
</tr>
Now when the option No, but planning in future is selected then the textbox must be enabled.This type of dropdown menu has been used many times in this form so i have to enable the textbox in another similar case too so how a single function can be written to do this.Help me out guys.
First of all, you should close your td's by adding a </td> to the end of the contents. That way browsers will have less trouble finding the right element if you use javascript.
Also, you will need to add values to your options, so that a form handler knows which has been picked. You could use something like:
<select name="mfi_4_a_i">
<option>Please choose one.</option>
<option value="yes">Yes</option>
<option value="no">No</option>
<option value="later">No, but planning in future</option>
</select>
You can leave the first one blank because they have to pick something else anyway.
About the textbox, you have to use javascript for this. Do you happen to use jQuery? That would make it easier to handle these things, especially if you re-use it a lot. It can also be done in regular javascript but I'm not sure about the code for it. Here's the solution in jQuery:
$('select').change(function(){
$input = $(this).parent().find('input');
if($(this).attr('value') == 'later') {
$input.removeAttr('disabled');
$input.focus();
} else {
$input.attr('disabled','true');
}
});
What this does: everytime a select dropdown changes values (something has been picked) it checks whether the option with value later was picked (maybe 'specify' would be more appropriate..). If that's true, it finds the first textbox that's inside the same element as the select. In this case both are at the same level in a td, if your html gets more complicated maybe you have to find another way to look for the nearest textbox.
If the input is found, it is set to enabled and the cursor is placed inside so they can start typing immediately.
If another option than 'later' is picked, the textbox is disabled again.
I have a <select> tag with various options, and I would like to know what determines what happens when the user starts typing.
Say I have a list like the following:
<select id="userlist">
<option value="nothing" selected="selected"></option>
<option value="AdamT">Adam T</option>
<option value="AidanC">Aidan C</option>
<option value="IanQ">Ian Q</option>
<option value="JamesR">James R</option>
</select>
Sometimes if I type A followed by I, I end up with Aidan C selected.
Other times, if I type just fractionally slower, I end up with Ian Q selected.
What determines what ends up being selected, and at what speed of typing? Is it browser-specific, or is it set in the HTML spec?
That is browser or OS specific, depending if the browser uses native or custom widgets, I think.
There is certainly nothing in the HTML spec about it.
The < select > is setup so that it performs a new autocomplete in about 1000 milisecond intervals between key presses. If you keep typing before the timer is up, it will continue the autocomplete with your current prefix. However, if you wait a second between key presses, it will start a new prefix, forgetting what you previously typed.