7913 Posts in 1355 Topics by 930 members
DataObjectManager Module
SilverStripe Forums » DataObjectManager Module » Minor Improvement for Search
Discuss the DataObjectManager module, and the related ImageGallery module.
Moderators: martimiz, UncleCheese, Howard, Sean, Ryan M., biapar, Willr, Ingo, swaiba, simon_w
|
Page:
1
|
Go to End | |
| Author | Topic: | 830 Views |
-
Minor Improvement for Search
29 September 2009 at 6:25am Last edited: 29 September 2009 6:26am
Hi UncleCheese,
There were a few things bothering me about the search box (I use it a lot). If you don't mind, I have attached two small changes for dataobject_manager.js. First, I borrowed the keycodes to ignore from YUI's autocomplete javascript. Second, I added an optional 'focus' param to the request function so that the Search bar doesn't lose focus after your results are displayed.
// Search
var request = false;
$container.find('#srch_fld').focus(function() {
if($(this).attr('value') == "Search") $(this).attr('value','').css({'color' : '#333'});
}).unbind('blur').blur(function() {
if($(this).attr('value') == '') $(this).attr('value','Search').css({'color' : '#666'});
}).unbind('keyup').keyup(function(e) {
if ((e.keyCode == 9) || (e.keyCode == 13) || // tab, enter
(e.keyCode == 16) || (e.keyCode == 17) || // shift, ctl
(e.keyCode >= 18 && e.keyCode <= 20) || // alt, pause/break, caps lock
(e.keyCode == 27) || // esc
(e.keyCode >= 33 && e.keyCode <= 35) || // page up, page down, end
(e.keyCode >= 36 && e.keyCode <= 38) || // home, left, up
(e.keyCode == 40) || // down
(e.keyCode >= 36 && e.keyCode <= 40) || // home, left, up, right, down
(e.keyCode >= 44 && e.keyCode <= 45) || // print screen, insert
(e.keyCode == 229) // Korean XP fires 2 keyup events, the key and 229
) return;
if(request) window.clearTimeout(request);
$input = $(this);
request = window.setTimeout(function() {
url = $(container_id).attr('href').replace(/\[search\]=(.)*?&/, '[search]='+$input.attr('value')+'&');
refresh($container, url, '#srch_fld');
},500)
e.stopPropagation();
});and ...
function refresh($div, link, focus)
{
// Kind of a hack. Pass the list of ids to the next refresh
var listValue = ($div.hasClass('RelationDataObjectManager')) ? jQuery('#'+$div.attr('id')+'_CheckedList').val() : false;
jQuery.ajax({
type: "GET",
url: link,
success: function(html){
if(!$div.next().length && !$div.prev().length)
$div.parent().html(html);
else
$div.replaceWith(html);
if(listValue) {
jQuery('#'+$div.attr('id')+'_CheckedList').attr('value',listValue);
}
var $container = jQuery('#'+$div.attr('id'));
$container.DataObjectManager();
if (typeof focus == 'string') {
$container.find(focus).focus();
}
}
});
} -
Re: Minor Improvement for Search
29 September 2009 at 7:16am
Love it!!! I tried to get that working a while back because I had a client complaining about it, but I eventually gave up. I'm not totally nuts about adding one more customization to the refresh() function, but, hey, I'll take it. Very nice. I've tested and checked in the code.
-
Re: Minor Improvement for Search
29 September 2009 at 7:33am Last edited: 29 September 2009 7:35am
You're right. It would be cleaner (and more JQuery like) to do it as a callback function.
instead of...
refresh($container, url, '#srch_fld');
//...
function refresh($div, link, focus)
//...
if (typeof focus == 'string') {
$container.find(focus).focus();
}do...
refresh($container, url, function($newcontainer) {
$newcontainer.find('#srch_fld').focus();
});
//...
function refresh($div, link, callback)
//...
if (typeof callback == 'function') {
callback($container);
}The key is passing the new container element back. When I tried using a callback the first time I was using the old DOM element and it didn't work. Anyway, now it doesn't feel as dirty as passing in a focus param.
| 830 Views | ||
|
Page:
1
|
Go to Top |
