Yii 1.1: bootstrap-twitter-typeahead

twitter typeahead
15 followers

Bootstrap 3.x does not have any typeahead anymore unlike bootstrap 2.x.x

but Twitter offer a new typeahead which are more flexible and robust. please check out the demo for more info

Requirements

Yii 1.1

Usage

Usage without model

$this->widget('ext.typeahead.TypeAhead',array(
       'name' => 'hello',
       'options' => array(
           array(
               'name' => 'accounts',
               'local' => array(
                   'jquery',
                   'ajax',
                   'bootstrap'
               ),
           )
       ),
       'events' => array(
           'selected' => new CJavascriptExpression("function(evt,data) {
               console.log('data==>' + data); //selected datum object
           }"),
       ),
)); ?>

Usage with model

<?php $this->widget('ext.typeahead.TypeAhead',array(
       'model' => $model,
       'attribute' => 'keyword',
       'options' => array(
           array(
               'name' => 'accounts',
               'local' => array(
                   'jquery',
                   'ajax',
                   'bootstrap'
               ),
           )
       ),
)); ?>

Usage with remote URL

$this->widget('ext.typeahead.TypeAhead',array(
     'model' => $model,
     'attribute' => 'keyword',
     'enableHogan' => true,
     'options' => array(
         array(
             'name' => 'countries',
             'valueKey' => 'name',
             'remote' => array(
                 'url' => Yii::app()->createUrl('/ajax/countryLists') . '?term=%QUERY',
             ),
             'template' => '<p>{{name}}<strong>{{code}}</strong> - {{id}}</p>',
             'engine' => new CJavaScriptExpression('Hogan'),
         )
     ),
     'events' => array(
         'selected' => new CJavascriptExpression("function(obj, datum, name) {
             console.log(obj);
             console.log(datum);
             console.log(name);
         }")
     ),
));

** in your Ajax Controller **

class AjaxController extends Controller
{
    public function actionCountryLists()
    {
        $term = Yii::app()->request->getQuery('term');
        $countries = Country::model()->findAllByAttributes(array('name' => "%{$term}%"));
        $lists = array();
        foreach($countries as $country) {
            $lists[] = array(
                'id' => $country->id,
                'name' => $country->name,
                'code' => $country->code,
            );
        }
        echo json_encode($lists);
    }
}

Resources

Total 4 comments

#18019 report it
paskuale at 2014/08/27 03:34am
url not wok (remote version)

Hi, why don't call the 'url' parameter ? thanks

#17424 report it
bandpay at 2014/06/10 06:43am
The right syntax

Unpack in extension dir and rename the bootstrap-typeahead to typeahead and this syntax will work

$this->widget('ext.typeahead.TbTypeAhead',array( 'model' => $model, 'attribute' => 'keyword', 'enableHogan' => true, 'options' => array( array( 'name' => 'countries', 'valueKey' => 'name', 'remote' => array( 'url' => Yii::app()->createUrl('/ajax/countryLists') . '?term=%QUERY', ), 'template' => '

{{name}}{{code}} - {{id}}

', 'engine' => new CJavaScriptExpression('Hogan'), ) ), 'events' => array( 'selected' => new CJavascriptExpression("function(obj, datum, name) { console.log(obj); console.log(datum); console.log(name); }") ), ));

#17339 report it
fahadakram at 2014/05/26 07:34am
found error on yii boilerplate when want ot use it on frontend

HeadersPostResponseHTMLCookies

PHP Error [2]

include(CJavascriptExpression.php): failed to open stream: No such file or directory (D:\wamp\www\simplifysupper\common\lib\Yii\YiiBase.php:423)

#0 D:\wamp\www\simplifysupper\common\lib\Yii\YiiBase.php(423): WebApplication->handleError()

1 D:\wamp\www\simplifysupper\common\lib\Yii\YiiBase.php(423): autoload()

2 unknown(0): autoload()

3 D:\wamp\www\simplifysupper\frontend\views\site_selected_rod.php(15): spl_autoload_call()

4 D:\wamp\www\simplifysupper\common\lib\Yii\web\CBaseController.php(127): require()

5 D:\wamp\www\simplifysupper\common\lib\Yii\web\CBaseController.php(96): SiteController->renderInternal()

6 D:\wamp\www\simplifysupper\common\lib\Yii\web\CController.php(870): SiteController->renderFile()

7 D:\wamp\www\simplifysupper\frontend\controllers\SiteController.php(49): SiteController->renderPartial()

8 D:\wamp\www\simplifysupper\common\lib\Yii\web\actions\CInlineAction.php(50): SiteController->actionshowpopup()

9 D:\wamp\www\simplifysupper\common\lib\Yii\web\CController.php(309): CInlineAction->runWithParams()

10 D:\wamp\www\simplifysupper\common\lib\Yii\web\CController.php(287): SiteController->runAction()

11 D:\wamp\www\simplifysupper\common\lib\Yii\web\CController.php(266): SiteController->runActionWithFilters()

12 D:\wamp\www\simplifysupper\common\lib\Yii\web\CWebApplication.php(283): SiteController->run()

13 D:\wamp\www\simplifysupper\common\components\WebApplication.php(33): WebApplication->runController()

14 D:\wamp\www\simplifysupper\common\lib\Yii\web\CWebApplication.php(142): WebApplication->runController()

15 D:\wamp\www\simplifysupper\common\lib\Yii\base\CApplication.php(162): WebApplication->processRequest()

16 D:\wamp\www\simplifysupper\frontend\www\index.php(44): WebApplication->run()

#16784 report it
sintret at 2014/03/27 06:46am
Invalid pointing

i found error when i use your extension, maybe code like this $this->widget('ext.typeahead.TbTypeAhead',array(.....

sorry my english not good thanks

Leave a comment

Please to leave your comment.

Create extension