Jump to:

7940 Posts in 1543 Topics by 946 members

DataObjectManager Module

SilverStripe Forums » DataObjectManager Module » Minor Improvement for Search

Discuss the DataObjectManager module, and the related ImageGallery module.

Moderators: martimiz, UncleCheese, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 963 Views
  • Gene
    Avatar
    Community Member
    41 Posts

    Minor Improvement for Search Link to this post

    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();
             }

          }
        });
    }

  • UncleCheese
    Avatar
    4085 Posts

    Re: Minor Improvement for Search Link to this post

    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.

  • Gene
    Avatar
    Community Member
    41 Posts

    Re: Minor Improvement for Search Link to this post

    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.

    963 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.