Yiistrap TbHtml::navbarSearchForm

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.

0 0
3 followers
Viewed: 15 026 times
Version: 1.1
Category: Tips
Written by: Patrice
Last updated by: CeBe
Created on: Nov 17, 2013
Last updated: 7 years ago
Update Article

Revisions

View all history

Related Articles