Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Search box

422422 Developer 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.

Tagged:

Best Answer

  • ToddTodd Chief Product Officer 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

  • 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 Developer MVP

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

  • 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>';
      }
    
  • edited December 2011
    • +DiscussionController_AfterDiscussion_Handler
  • ToddTodd Chief Product Officer 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 Developer MVP

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

  • 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 Chief Product Officer 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.