Yiibooster Typeahead Won't Work.

Yii 1.1 Extensions
1 



$this->widget('bootstrap.widgets.TbTypeahead', array(

    'options'=>array(

    'name'=>'demo-typeahead',

    'source'=>array(

    'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',

    'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia',

    'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa',

    'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland',

    'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri',

    'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey',

    'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio',

    'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina',

    'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',

    'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'),

    'items'=>4,

    'matcher'=>"js:function(item) {

    return ~item.toLowerCase().indexOf(this.query.toLowerCase());

    }",

    )));




I 've got this error "TbTypeahead must specify "model" and "attribute" or "name" property values.".Any ideas,Thx.
2

Hi nakarin,

assuming that you want to use a form to create/update the "state" of a "user", you should have a model "User" with an attribute "state", so you should specify the model and the state.




$this->widget('bootstrap.widgets.TbTypeahead', array(

    'model'     => $model,  // INSTANCE OF MODEL 'User'

    'attribute' => 'state', // ATTRIBUTE

    'options'=>array(

        'name'=>'demo-typeahead',

        'source'=>array(

        'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',

        'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia',

        'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa',

        'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland',

        'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri',

        'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey',

        'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio',

        'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina',

        'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',

        'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'),

        'items'=>4,

        'matcher'=>"js:function(item) {return ~item.toLowerCase().indexOf(this.query.toLowerCase());}",

        )

    )

);

Otherwise you should specify just a name for this widget.




$this->widget('bootstrap.widgets.TbTypeahead', array(

    'name'     => 'your-name-for-the-widget',  // NAME

    'options'=>array(

        'name'=>'demo-typeahead',

        'source'=>array(

        'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',

        'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia',

        'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa',

        'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland',

        'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri',

        'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey',

        'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio',

        'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina',

        'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',

        'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'),

        'items'=>4,

        'matcher'=>"js:function(item) {return ~item.toLowerCase().indexOf(this.query.toLowerCase());}",

        )

    )

);

For future posts, please use the tag [code] to format your code ;).

3

Thank you very much Giuseppe Santoro.Work like a charm. :)

4

how to populate TBtypeahead with database column values than static data?

appreciated in advance for your great help

5

[color="#006400"]/* moved from General Discussion */[/color]

6

moved to where ???? i can’t find the continuation to this topic , is there one ?

7

This is an old thread, but I have problems implementing the Bootstrap typeahead component populated by ajax call.

Here is the code for the widget:




	$this->widget('bootstrap.widgets.TbTypeahead', array(

		'model'=>$expense,

		'attribute'=>'afm',

		'htmlOptions'=>array('autocomplete'=>'off'),

		'options'=>array(

			'source'=>'js:function(query, process) {

				$.ajax({url: "' . $urlAfm . '", data: {query: query}, dataType: "json" })

				.done(function(data) {

					return process(data);

				})}',

		)));

	?>

The code from the controller action that returns the JSON data is:




	public function actionAjxGetAFM($query = '') {

		if (Yii::app()->request->isAjaxRequest && trim($query) != '') {

			$companies = Yii::app()->db->createCommand('SELECT name FROM company WHERE afm '

				. 'LIKE :match LIMIT 10')->queryColumn(array(':match'=>$query . '%'));

			Yii::trace(print_r(CJSON::encode($companies), true));

			echo CJSON::encode($companies);

			Yii::app()->end();

		}

		echo '0';

	}

I can see from Firebug, that the AJAX call is fired and I can also see the JSON response. However, no popup menu appears to select any item.

What am I doing wrong?

8

I found the following article explains things pretty well:

http://tatiyants.com…trap-typeahead/