6

Title pretty much says it all. I am looking for a way to add placeholder/help text to a Views exposed filter. This would be text that appears in the filter (in this case, search field) before the user enters a value, and then disappears when the filed is clicked or when text is entered into it.

6

You can do this with preprocess functions. Here's a tutorial on doing this for the default search box; you can do views exposed filters in a similar way.

You may also be able to use the Compact Forms module to do this, though I don't know if it is compatible with Views exposed filters.

Also, there's a module for showing helper text below a field: Better Exposed Filters

To set it up, simply enable the module and then navigate to your view edit page. Under Exposed Form, click Basic next to Exposed form style and change it to Better Exposed Filters. Then adjust as necessary.

However, this module will not automatically hide the text upon input.

| improve this answer | |
  • I already have Better Exposed Filters installed, but I don't see this option in my setting anywhere. The only thing close to it that I see is a Description area under Better Exposed Filter's settings. This just places helper text below the field, though. Do you happen to know where this option is? – Mrweiner May 14 '12 at 2:12
  • Sorry, Better Exposed Filters doesn't have that option. I misread your question; see my update above. – Patrick Kenny May 14 '12 at 2:20
  • Haven't gotten a chance to try it out yet as I've been busy on other projects, but this seems like the correct way to go about it. Thanks. – Mrweiner May 18 '12 at 16:13
5

I've been searching for that and could add placeholder with that way:

  1. Open your theme's template.php file (if not exist create one).
  2. Add the code below to your template.php file:

(Read the notes below the code.)

function mmsearchresults_form_alter(&$form, &$form_state, $form_id){
  if($form_id == "views_exposed_form"){
    dsm($form); // print $form array on the top of the page
    if (isset($form['title'])) {
            $form['title']['#attributes'] = array('placeholder' => array(t('Gemeente...')));
    }
  }
}


Note 1: If the form_alter function is already exist, do not add it again, just copy and paste the if($form_id=...) part.

Note 2: Change the 'title' whatever element you want to add placeholder.

Note 3: If you want not to display label, you could do this by css (display: none) or by adding unset($form['title']['#title']); inside of the code above.

| improve this answer | |
  • 1
    Keep in mind, "views_exposed_form" as ID, will target ALL views exposed forms. Additionally, add an extra validation inside the condition. For example: if ($form['#id'] == "the-specific-form-id") { //The form specific modifications here.. } – Sillo Sep 9 '18 at 10:46
1

I had the same issue about putting a placeholder on a exposed filter input, that's why I use jQuery code on a "diplay:none;" bloc.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

    $(function($){
        var elm = $("#id-of-the-input");
        elm.val(elm.attr('name'));
        elm.focus(function(event){
            event.preventDefault();
            if(elm.val() == elm.attr('name')){
                elm.val('');
            }
        });
        elm.focusout(function(event){
            event.preventDefault();
            if(elm.val() == ""){
                elm.val(elm.attr('name'));
            }
        });
    });

    </script>
| improve this answer | |
1

Using a more specific approach with hook_form_FORM_ID_alter:

<?php
/**
 * Implements hook_form_FORM_ID_alter() for views_exposed_form().
*/
function hook_form_views_exposed_form_alter(&$form, &$form_state) {
    $form['form_name']['#attributes']['placeholder'] = t('Placeholder text here');
}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.