Blog Documentation Book a Demo

Search box

422422 MVP
edited December 2011 in Vanilla 2.0 - 2.8

I wish to add placeholder text within search box, do you know where thee code is for this plz.

There was an error rendering this rich post.

Tagged:

Best Answer

  • ToddTodd Vanilla Staff
    Answer ✓

    If you are using default.master.php you can transmit any html attribute in $Form->TextBox.

    echo $Form->TextBox('Search', array('placeholder' => T('Search Forums')));

    If you are using the {searchbox} in your theme then the placeholder is just the translation of "Search". So you could add the following definition:

    $Definition['Search'] = 'Search Forums';

    Since the word "Search" is rather generic that translation may clash with other instances of it on the site. We could be persuaded to make the translation different.

Answers

  • johansonlockerjohansonlocker ✭
    edited December 2011

    application\dashboard\views\default.master.php

    echo $Form->Open(array('action' => Url('/search'), 'method' => 'get')), $Form->TextBox('Search'), $Form->Button('Go', array('Name' => '')), $Form->Close();

    I too want to add placeholder to it. But maybe it would be better to use some js code?

  • 422422 MVP

    Cheers perhaps we can add value somehow. Will have a play

    There was an error rendering this rich post.

  • johansonlockerjohansonlocker ✭

    Well, try this

      public function DiscussionsController_AfterBody_Handler($Sender,$Args) {
    $JS='var input = document.getElementById ("Form_Search"); 
    input.placeholder = "Placeholder value";';
    echo '<script type="text/javascript">'.$JS.'</script>';
  }
  • johansonlockerjohansonlocker ✭
    edited December 2011
    • +DiscussionController_AfterDiscussion_Handler
  • ToddTodd Vanilla Staff
    Answer ✓

    If you are using default.master.php you can transmit any html attribute in $Form->TextBox.

    echo $Form->TextBox('Search', array('placeholder' => T('Search Forums')));

    If you are using the {searchbox} in your theme then the placeholder is just the translation of "Search". So you could add the following definition:

    $Definition['Search'] = 'Search Forums';

    Since the word "Search" is rather generic that translation may clash with other instances of it on the site. We could be persuaded to make the translation different.

  • 422422 MVP

    I was really looking to add ID but see ths is already implemented, but thanks todd. Will keep playing.

    There was an error rendering this rich post.

  • ReiterReiter
    edited December 2011

    @Todd:

    I currently have this:

    <input type="text" id="Form_Search" name="Search" value="" placeholder="Search…" class="InputBox">

    Can you please tell me what I have to do to get this as end-result:

    <input type="text" id="Form_Search" name="Search" value="Search..." class="InputBox" onblur="if (this.value == '') {this.value = 'Search...';}" onfocus="if (this.value == 'Search...') {this.value = '';}" >

    Sorry, but I'm a Noob in this area.

  • ToddTodd Vanilla Staff

    That `placeholder="Search..." should do the exact same thing as your javascript @Reiter. If you want to add javascript to elements you never add inline events to the html, you always add jQuery.

    I recommend heading over to http://jquery.com and familiarizing yourself with the library. It will help you immensely to understand this now ubiquitous library.

Sign In or Register to comment.