Little suggestion: Use html5 input type=search for the "Search" textbox
Little suggestion: Use html5 input type=search for the "Search" textbox
davec
Posts: 6Questions: 0Answers: 0
This will apply the little "x" to cancel a search. Non-html5 browsers will fallback to treating the input as a normal textbox (the default type for an input).
This discussion has been closed.
Replies
Allan
I would really like it if the search/filter box had a label around the text in front of it (and the search box the id to go with it).
Once that is the case you can click 'Search' and have the focus inside the search box.
I use and make html forms almost daily and labels make life so much easier; gives a much larger target to click on (and also helps with the cursor not being in the way as it is when clicking the box directly).
Allan
I don't think what you suggest is possible for the change I would like.
Below is the part of the source of the page you linked to:
[code]
Search:
[/code]
This is the same source with the changes I'd like:
[code]
Search:
[/code]
Obviously the name of the id for the input box is up to you, this was just an example.
Allan
I tried your suggestion but it fails in Firefox 4.0.1.
[code]
Search:
[/code]
I think it will fail in any browser as the WC3 rule for labels is pretty clear; you can only use ids for labels to point to: http://www.w3schools.com/tags/tag_label.asp
There's no downside to adding an id to the input box, is there?
No doubt a clever suggestion, but I believe that it can also be "a double-edged sword". Once modified the .js file, I tried all five browsers currently installed on my PC. Only Google Chrome and Safari displayed the blade to clear or cancel the search.
Here there is a noticeable change: a person who does not play with the search field and learn how it works will have more problems because the character x clears the field but does not restore the table to its initial state... and the results are still filtered. It takes a carriage return or press the enter key.
In the former way, using the backspace key the field is cleaned and restored the table both at a time.
It would be desirable to slightly change the background color of the field, even an empty one, after a search operation to denote that is still performing the filtering mechanism.
Luys
@Luys: The "search" type is non-standard at the moment (although possibly in the HTML5 draft? Can't remember...) - something Apple introduced into Webkit. It's quite a nice control the search input and will fall back to 'text' for other browsers, but it's certainly something that needs to be considered if you want to use it.
Allan
When I said it failed I mean it didn't work; it didn't do anything. When clicking on the word "Search" nothing happens.
When I add a label via oLanguage.sSearch as you suggested and then add an id via Firebug it works just fine.
As it happens I had already read the post you linked to but unfortunately I'm no ARIA expert.
Did you add an event handler for something to happen when you click on that text? There isn't one by default.
Allan
I see what you mean now.
I didn't add one but that's not the route I'd want to go.
There's an existing label function in html so I'd want to use that if at all possible and not rely on any extra javascript.
> When clicking on the word "Search" nothing happens.
What would you expect to happen? There is nothing that will happen by default, and that is exactly what you are seeing :-). If you want it to do something, you'll need to add a click event handler.
Allan
I believe he is expecting when you click on a label it sets focus to the input for it. So if you click search the cursor will be in search ready for typing. This is standard for html. You would wrap the text 'Search' in a label and put an id on the input. HTML labels respond to ID's for the input pairing.
Example: Search
When clicking on the text 'Search' the focus will switch to the input including a cursor. Info here http://htmldog.com/guides/htmladvanced/forms/
In which case, is it not just a case of setting up the DOM to look like your example and the browser will add the focus control?
Allan
You're correct. The ID must be on the input element and it must match the "for" attribute of the label. The browser will then automatically focus the input when you select the label. This is especially useful on radio and checkboxes where the area to click is otherwise far too small. It also explicitly associates the label with the field which is standard accessibility and practice. An often overlooked advantage is that you can also hook into this "for" attribute in your CSS (for modern browsers anyway) should one of them need special styling rules.
On the question of HTML 5, I've been experimenting and as well as changing the input type to "search" you also need to add a binding for the 'search' event which is triggered when a user stops typing, or crucially, when they click the "x" symbol that Webkit adds. Without this binding your existing event handler does not fire upon clicking the 'x', so the box clears but the filter remains active.
Here's the modified code. I chose "searchfilter" as an id for the input, but of course you might wish to change that. (As it now has an ID I also changed the jQuery selector to use it rather than "input" which might make it ever so slightly faster, but this isn't necessary. Oddly it still needed the context, which I didn't expect. I suspect if you created it the inputs with createElement rather than innerHMTL it wouldn't)
[code]
nFilter.innerHTML = ''+oSettings.oLanguage.sSearch + sSpace + '';
var jqFilter = $("#searchfilter", nFilter);
jqFilter.val(oSettings.oPreviousSearch.sSearch.replace('"', '"'));
jqFilter.bind('keyup.DT search', function (e) {
/* Update all other filter input elements for the new display */
var n = oSettings.aanFeatures.f;
for (var i = 0, iLen = n.length; i < iLen; i++) {
if (n[i] != this.parentNode) {
$('input', n[i]).val(this.value);
}
}
/* Now do the filter */
if (this.value != oSettings.oPreviousSearch.sSearch) {
_fnFilterComplete(oSettings, {
"sSearch": this.value,
"bRegex": oSettings.oPreviousSearch.bRegex,
"bSmart": oSettings.oPreviousSearch.bSmart
});
}
});
[/code]
I see now where all the confusion came from; I figured you knew about the label functionality in html (I did actually include a link to W3schools.com). It's exactly as fleeting and Niall said; the big advantage is that is puts the focus on the linked input element directly.
And thanks Niall for all the work on the code! I hope this will make it into a later release. :)