How to add the search form in Bootstrap theme?

Question

I am trying to set the search form with submit button in the Navbar as shown in the following image(Following image I have taken from the Bootstrap tutorial page).

---

• Now, When we install the default Bootstrap theme from drupal.org it will be ended up like as shown in following image.

  

  Now, if I simply move that block to the Navigation bar, it will end up as shown in following image, which is not a solution for this.

  

  So, I dig out on the bootstrap tutorial page and found the following code.

  

  So, I can paste that code in the page.tpl.php and can achieve as shown in following image, BUT it will not search anything, as it is just a plain HTML code.

  

---

How can I achieve that? If CSS is the answer, for now I do not want to go with that. As IMHO, since this display of search form is described as a default on the bootstrap tutorial and in every theme demo display pages, So, there should be some way to enable that, or some way to place that.

Any suggestion or direction? Thanks.

Answer 1

After some search I figure out the following solution, it is working, But the issue is it is applying to search_block_form also, might be function lsubtheme_bootstrap_search_form_wrapper($variables) is the reason, which is getting applied everywhere. Might be giving False positive result.

PLEASE anybody have any suggestion, how to imptove this, I am trying will update.

Codes in template.php

function lsubtheme_preprocess_page(&$variables){
  $search_form = drupal_get_form('search_form');
  $search_box = drupal_render($search_form);
  $variables['search_box'] = $search_box;
}

/*
 *  Form alter to add missing bootstrap classes and role to search form.
 */

function lsubtheme_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'search_form') {
    $form['#attributes']['class'][] = 'navbar-form navbar-left';
    $form['#attributes']['role'][] = 'search';
  }
}


function lsubtheme_bootstrap_search_form_wrapper($variables) {

  $output = '<div class="form-group">';
  $output .= $variables['element']['#children'];
  $output .= ' <div class="form-group">';
  $output .= '<button type="submit" class="btn btn-default">Search</button>';
  $output .= '</div>';
  $output .= '</div>';
  return $output;
}

Code in page.tpl.php

 <?php print $search_box; ?>

Answer 2

You will basically have to re-implement the rendering yourself.

The best way to do this, to me, is to implement hook_theme, provide a function, template, and variables to pass on, and change (via hook_form_alter or your provider Form class if you have one, Drupal 8) the form rendering function to your new one.

This will result in a cleaner more manageable approach, as you can then drop the HTML from the Bootstrap docs into your designated template. Then, any time you want to render a basic search form to be the Bootstrap one, change the forms #theme to your function. Then you don't have to fool with a lot of spaghetti code.

I would not copy/paste HTML into page.tpl.php as that will have no effect at all.

I see where you are getting the above code from, but I personally would not store markup like that in template.php. Easy to miss, and hard to adjust. The goal for an override like this is to isolate the behavior and ensure that no other form later on is inadvertently altered.

I wish I had an example on hand, but I cannot find one at the moment.

Answer 3

Why not solve this on the theme level? Add the following to your sub theme javascript file. See https://www.drupal.org/node/304255 for more info

jQuery('#search-block-form .input-group button.btn.btn-primary span')
  .text('Submit')
  .removeClass('glyphicon glyphicon-search icon')

Or in a new javascript file like

jQuery(document).ready(function() {
    var $button = jQuery('#search-block-form .input-group button.btn.btn-primary span');
  $button
    .text('Submit')
    .removeClass('glyphicon glyphicon-search icon');
  });

Resulting in I've tried other solutions in projects which never were more satisfying than this.

To test without sub theme I placed it in a module dummy hook_init().

/**
 * Implements hook_init().
 */
function dummy_init() {
    drupal_add_js('jQuery(document).ready(function () { jQuery("#search-block-form .input-group button.btn.btn-primary span").text("Submit").removeClass("glyphicon glyphicon-search icon") });', 'inline');
}