Hi,
I have been trialling with some success the Ajax select widget. A feature
which I think is missing is the fact that we cannot use the keyboard to
select an entry, and the mouse is required: this can become quite annoying.
I propose below a patch, that fixes partly the issue. It has been tested on
Firefox. With the patch, when when you press the ‘tab’ key, the first
available choice from the list is selected, and the focus goes to the next
form input. Let me know what you think of it.
Cheers
Raphaël
<=========== Start of the patch
Index: etemplate/js/ajax_select.js
— etemplate/js/ajax_select.js (revision 24501)
+++ etemplate/js/ajax_select.js (working copy)
@@ -49,9 +49,11 @@
if(widget.addEventListener) {
widget.addEventListener(‘keyup’, change, true);
widget.addEventListener(‘blur’, hideBox, false);
-
widget.addEventListener('keypress', checkTab, true);
} else {
widget.onkeyup = change;
widget.onblur = hideBox;
-
widget.onkeypress = checkTab;
}
// Set results
@@ -72,7 +74,45 @@
}
}
+function checkTab(e, value)
+{
- if (e.keyCode != ‘9’) return; // The user has not pressed TAB
-
if(e.target)
- {
-
var target = e.target;
-
}
- else if (e.srcElement)
- {
-
var target = e.srcElement;
-
}
-
if(target)
- {
-
if (target.nodeType == 3) { // defeat Safari bug
-
target = target.parentNode;
-
}
- }
- var id = target.id;
-
var base_id = id.substr(0, id.lastIndexOf('['));
-
var elements = document.getElementById(base_id +
‘[results]’).childNodes;
-
var elem;
-
for (var i = 0; i < elements.length; i++)
-
{
-
elem = elements.item(i);
-
if (elem.value) break; // We have found the first selection
-
}
-
if (!elem) return;
-
var value = document.getElementById(elem.value.value_id);
-
var search = document.getElementById(elem.value.search_id);
-
if(value) {
-
value.value = elem.value.key;
-
}
-
if(search) {
-
search.value = elem.value.value;
-
}
+}
+
+
function change(e, value) {
if(!e) {
var e = window.event;
<========= End of the patch
–
Raphael Alla
Mitija Australia
+61 4 15 678 576
+687 78 86 86
http://www.mitija.com
