Use a search bar (exposed filter) to search for different node fields

Question

I am trying to make an advanced search with exposed filters and views in drupal.

I am trying to achieve the following:

On the left textfield, the user would input whatever he wants to search, and the views will only search by the field selected in the list at the right (field_A in the picture example). (In short, the column by which to search would be the one selected in field to the right)

NOTE: field_A, field_B, etc, would be all from the SAME node type.

I can make it work easily if I only have 1 field to search by (this field is set by interface when you configure the autocomplete functionality in drupal).

What I want is to be able to dynamically supply the field to search by, because said field will depend on what the user chooses from the combo box at the right (as explained in the note, this combo box will have different choiches field_A, field_B, field_C....etc).

Would it be better to create a custom module instead of using Views with exposed filters?

Thanks.

Answer 1

Views with exposed filters, and then a bit of custom js should do the job fine.

Basically loop over the fields that are there and use them to build a select so users can choose which field to search. The existing fields names relate to the query string key that we need to use.

Something like this should suffice:

(function($) {
  Drupal.behaviors.viewsSearchBar = {
    attach: function(context, settings) {

      // Build the HTML for the new field we are adding.
      var newField = '<div class="views-exposed-widget views-widget-filter-combined-search" id="edit-combined-search">';
      newField += '<input type="text" class="form-text" maxlength="128" size="30" value="" name="combined-search-text" id="combined-search-text">';
      newField += '<select id="combined-search-field">';

      // Loop over the existing widgets to add options to our new select.
      $('.views-exposed-widgets .views-exposed-widget').each(function(){

        var title = $(this).find('label').text().trim();
        var value = $(this).find('input').attr('name');

        if(title && value) {
          newField += '<option value="'+value+'">'+title+'</option>';
          // This this widget
          $(this).hide();
        }

      });

      newField += '</select></div>';

      // Add our new field.
      $('.views-exposed-widgets').prepend(newField);

      // Create a submit function for the views search form.
      $('.view-filters form').submit(function(e){

        // Stop the form doing it's default action.
        e.preventDefault();

        // Build the new URL.
        var baseURL = window.location.protocol + '//' + window.location.host + window.location.pathname;
        var field = $('#combined-search-field').val();
        var text = $('#combined-search-text').val();

        // Off we go...
        window.location = baseURL + '?' + field + '=' + text;

      });

    }
  };

})(jQuery);

Further work that needs to be done:

• Check if there is already a search argument in the query string and set the default value of the custom search field and select.