Custom Search Paths Selector Type and Label Text

So far everything is working correctly for me. I am seeing the selector type and using the checkboxes.

Well I figured out the Themeforest like search. I ended up not using the code from http://tympanus.net/Tutorials/UIElements/SearchBox/. It had a usability problem of the search options disappearing when you mouseout.

If interested, here is the code I used to fade in the search options when the search input is clicked. When you click outside the search input it will make the search options disappear. It works great, but falls short in that it doesn't work with the keyboard. I probably need to spend some more time on keyboard accessibility and abstraction. This works with the stock drupal jquery.

Of course you need to add your own CSS to hide and position the search options.

Drupal.behaviors.cmftaoAddSearchBoxClass = function (context) {
var $searchTitle = $('#block-custom_search_blocks-1>div.block-title');
var $searchInput = $('#edit-custom-search-blocks-form-1');
var $searchOptions = $('#block-custom_search_blocks-1 div.custom-search-types');
var $searchPaths = $('#block-custom_search_blocks-1 div#edit-custom-search-paths-wrapper');
 

/* Hide the block title */
$searchTitle.remove();

/* Hide the Search Options */
$searchOptions.hide().click(function(e){
e.stopPropagation();
});

/* Hide the Search Paths */
$searchPaths.hide().click(function(e){
e.stopPropagation();
});

/* Open the Search Options and Search Paths */
$searchInput.click(function(e){
    e.stopPropagation();
    $searchOptions.fadeIn('normal');
    $searchPaths.fadeIn('normal');
    $(this).addClass('opened');
    
});

/* Hide the search options when focus outside */
/* http://rob-bell.net/2009/02/handling-clicks-outside-a-specified-area-in-jquery/ */

$(document).click(function(){
$searchPaths.hide();
$searchOptions.hide();
$searchInput.removeClass('opened');
});

/* End of behavior */
};

Unfortunately, there is no demo. It is running locally. It works in IE6+, Firefox, Chrome, Safari, Opera. It should now be keyboard accessible.

I just posted this code to help someone who might be trying to do the same thing.

Drupal.behaviors.cmftaoSearchBoxDropdown = function (context) {
var $searchTitle = $('#block-custom_search_blocks-1>div.block-title');
var $searchInput = $('#edit-custom-search-blocks-form-1');
var $searchOptions = $('#block-custom_search_blocks-1 div.custom-search-types');
var $searchPaths = $('#block-custom_search_blocks-1 div#edit-custom-search-paths-wrapper');
 

/* Hide the block title */
$searchTitle.remove();

/* Add a close Search Options link */
$searchOptions.append('<a class="closeSearchOptions" href="#">Close</a>');
$searchOptions.find('a.closeSearchOptions').click(function(e){
e.preventDefault(); /* prevent browser default */
$searchOptions.hide();
$searchPaths.hide();
});

/* Hide the Search Options */
$searchOptions.hide().click(function(e){
e.stopPropagation();
});

/* Hide the Search Paths */
$searchPaths.hide().click(function(e){
e.stopPropagation();
});

/* Open the Search Options and Search Paths */
$searchInput.bind('click focus',(function(e){
    e.stopPropagation();
    $searchOptions.fadeIn('normal');
    $searchPaths.fadeIn('normal');
    $(this).addClass('opened');

    
}));

/* Hide the search options when focus outside */
/* http://rob-bell.net/2009/02/handling-clicks-outside-a-specified-area-in-jquery/ */

$(document).bind('click focus',function(){
$searchPaths.hide();
$searchOptions.hide();
$searchInput.removeClass('opened');
});

/* End of behavior */
};

In your theme add a javascript file with the code I provided. Make sure your javascript file is referenced in your .info file.
Something like scripts[] = js/cmf_script.js

Then change the variables at the top of the code to match your selectors in your theme. Customize as needed. CSS is needed to control the look and positioning of the dropdown.

@jdanthinne - So far it looks to be working good with one search field. I haven't tried testing two search fields on the same page.

Is there anyway you could move the close link inside of div.fieldset-content?
You can do this by changing:

Line 107 - custom_search.js
from var popup = $('fieldset.custom_search-popup');
to this var popup = $('fieldset.custom_search-popup div.fieldset-content');

The reason I say this is because I would like the close link to be located in the bottom right of the popup. The only way to do this currently is to set a height and width on the fieldset.custom_search-popup and then absolutely position the close link to the bottom right. The problem with that is, the height of fieldset.custom_search-popup is unknown(it grows in height based on what search options are in it).

By placing the close link inside of the div.fieldset-content, it will naturally fall below(after) all the other elements.

FYI... After making the change, I noticed the popup fades in twice for some reason. I'm still looking into that. The close link is positioned correctly. Maybe it's just my theme?

What's your thoughts? Great job, by the way.

I made the changes you indicated. That fixed the double fade. I changed my css and it worked just as you said.

Hive Five,
-Glenn

For what it's worth, my search box is showing and working fine on every page. I'm using the context module for block placement, not the block UI.

Yes, I have a sitewide context setup that say's to show the custom search block on every page.

Yes, the popup is showing correctly on every page for me.

Just noticed a problem. When an element is added to the DOM, the behavior gets called again and the close link results in duplicate close links. In my case I noticed it happening when I edit a box with the boxes module. It provides in-page editing of blocks.

The solution is here under behaviors
http://drupal.org/node/205296

I had a similar problem with a Column List Splitter jquery script running again everytime something was added to the DOM.
Here was the code before:

Drupal.behaviors.cmftaoSplitLists = function (context) {
  $('div.menu-block-3 ul.menu').easyListSplitter({colNumber:4});
}; /* End of behavior */

Here is the code after that fixed the problem.

Drupal.behaviors.cmftaoSplitLists = function (context) {
  $('div.menu-block-3 ul.menu:not(cmftaoSplitLists-processed)', context).addClass("cmftaoSplitLists-processed").easyListSplitter({colNumber:4});
}; /* End of behavior */

On line 107 in custom_search.js
I think changing
var popup = $('fieldset.custom_search-popup');

to

var popup = $('fieldset.custom_search-popup:not('custom_search-processed')', context);
popup.click(function(e){
    e.stopPropagation();
  })
popup.addClass("custom_search-processed").append('<a class="custom_search-popup-close" href="#">' + Drupal.t('Close') + '</a>');
$('a.custom_search-popup-close').click(function(e){
    $('fieldset.custom_search-popup.opened').hide().removeClass('opened');
    e.preventDefault();
  });

Hope that helps,
-Glenn

@Ela - change your css on the options element to a higher z-index

In your theme's .css file try adding:

fieldset.custom_search-popup{
z-index:1000;
}

Sorry, but the css styles can vary from theme to theme. Without seeing your site I am unable to help.

Ok, I couldn't download the new dev yet, but I did make the change you specified in custom_search.js. That fixed the close link from duplicating when I click on the "Edit" link of a box with the Boxes module, however I tried clicking the cog icon and choosing "Edit Skin" on a block with the Skinr module installed and the link still duplicates.

I'm not sure what adding the context parameter does, but I know the javascript on the new drupal.org uses the

var popup = $('fieldset.custom_search-popup:not(.custom_search-processed)', context).addClass("custom_search-processed");

syntax.

I tried adding this to custom_search.js line 107

  var popup = $('fieldset.custom_search-popup:not(.custom_search-processed)', context).addClass("custom_search-processed");

and it fixed the Skinr issue and the Boxes module issue.

Hope that helps,
-Glenn