1. Requirements
2. Usage
3. Resources

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 ¶

• Project page
• Try out a demo
• Point of Sales
• Tracking 4 Web