Yiistrap TbHtml::navbarSearchForm

You are viewing revision #2 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version or see the changes made in this revision.

« previous (#1)next (#3) »

Hi all,

Just wanted to share this tip with anybody who wants to include a search field in the navbar of the excellent Yiistrap (idea is the same for the former Bootstrap).

The initial wish was like this :

/view/layouts/main.php

<?php $this->widget('bootstrap.widgets.TbNavbar', array(
    ...
    'items' => array(
        array(
            'class' => 'bootstrap.widgets.TbNav',
            'items' => array(
				array('label'=>Yii::t('app','Contact'), 'url'=>...),
				TbHtml::navbarSearchForm('#'), //how to set it up ?
				array('label'=>Yii::t('app','Logout'), 'url'=>...),
				array('label'=>Yii::t('app','Login'), 'url'=>...), 
            ),
        ),
    ),
)); ?>

I saw in the source code of TbHtml helper how to setup TbHtml::navbarSearchForm, especially using 'inputOptions'.

TbHtml::navbarSearchForm(Yii::app()->createUrl('/mycontroller/myviewwithsearchcapability'), 'post', array('inputOptions' => array('name' => 'Mymodel[myfield]', 'class' => 'search-query span2',  'placeholder' = >Yii::t('app','Search a value')))),

The search is better, but not efficient.

So,

I made a search on the Web, and found a tip (divide the menu in 2 parts, and include directly a <form> tag in order to obtain a efficient search box).

Search can be done on the Web (solution 1).

Search can be done inside the application (solution 2), via an 'admin' view (or other view with search capabilities). The syntax of the search field is 'Mymodel[myfield]'.

Right now, I am not able to do a complex search (many fields in the same view, or a same field in many views). Maybe later.

The current code is this one (with 2 search fields in the navbar) :

/view/layouts/main.php

<?php $this->widget('bootstrap.widgets.TbNavbar', array(
    ...
    'items' => array(
        array(
            'class' => 'bootstrap.widgets.TbNav',
            'items' => array(
				array('label'=>Yii::t('app','Contact'), 'url'=>...),
//				TbHtml::navbarSearchForm(Yii::app()->createUrl('/mycontroller/admin'),'post',array('inputOptions'=>array('name'=>'Mymodel[myfield]', 'class'=>'search-query span2', 'placeholder'=>Yii::t('app','Search a value')))),
            ),
        ),

// Source : http://www.askdavetaylor.com/how_can_i_add_a_google_search_box_to_my_web_site.html
// Source : http://snarfed.org/site_search_with_the_google_ajax_search_api
// Source : http://mediaconnectinfo.free.fr/sel/Tuto/tuto/google_code_amettre_dans_page_web.html

// Solution 1 : <form> tag to perform a google search into a named "sitesearch"
		'<form class="navbar-search pull-left" action="http://www.google.com/search" target="_blank">
		<input type="hidden" name="hl" value="'.Yii::app()->language.'">
		<input name="q" type="text" class="search-query span2" placeholder="'.Yii::t('app','Search on the Web').'">
		<input type="hidden"  name="sitesearch" value="yiiframework.com" />
		</form>',

// Solution 2 : <form> tag for yii search using a controller and an action with search capability (i.e. 'admin' view)
		'<form class="navbar-search pull-left" action="'.Yii::app()->createUrl('/mycontroller/admin').'">
		<input name="Mymodel[myfield]" type="text" class="search-query span2" placeholder="'.Yii::t('app','Search a value').'">
		</form>',

        array(
            'class' => 'bootstrap.widgets.TbNav',
            'items' => array(
				array('label'=>Yii::t('app','Logout'), 'url'=>...),
				array('label'=>Yii::t('app','Login'), 'url'=>...), 
                             ),
             ),
    ),
)); ?>

Hope this helps.