Uncaught TypeError: Object [object Object] has no method 'select2'

Question

I am trying to use "SELECT2" extension with YII. I followed the tutorial step by step but it's not working. The drop-down list for auto-complete doesn't appear and I am getting this error in chrome console...

The controller code (HotelController)

public function actionTitleName(){
    $model =HotelEn::model()->findAll ('Title like :Title',array(':Title'=>"%".$_GET['q']."%")); 
    $result = array();
    foreach ($model as $HotelEn){
        $result[] = array(
            'id'=>$HotelEn->id,
            'term'=>$RoomEn->Number,
        ); 
    }
    echo CJSON::encode($result);
}

the view code (_roomearch)

echo CHtml::beginForm(CHtml::normalizeUrl(array('Hotel/create')), 'get', array('id'=>'filter-form'))
    . '<div class="row" style="width:100%;">'
    . CHtml::encode('Hotel Name')
    . CHtml::textField('Number',(isset($_GET['Number'])) ? $_GET['Number'] : '',array('id'=>'Number'));
$this->widget('ext.select2.ESelect2',array(
    'selector' => '#Title',
    'options'  => array(
        'allowClear'=>true,
        'placeholder'=>'Select a Hotel Name',
        'minimumInputLength' => 2, 
        'ajax' => array(
            'url' => Yii::app()->createUrl('Hotel/Number'),
            'type'=>'GET',
            'dataType' => 'json',
            'quietMillis'=> 100,
            'data' => ' function(term,page) {
                return {
                    //get im my controller
                    q: term, 
                };
            }',
            'results'=>'function(data,page) { return {results: data, more:more }; }',
        ),
    ),
));         
echo '</div>'

Answer 1

I ran into the same problem today. I received the "Uncaught TypeError: Object [object Object] has no method 'select2'" error message in my browser console as well as a warning about a deprecated method in another .js file I was referencing (http://code.jquery.com/jquery-1.9.1.js). Turns out I wasn't even using it! so I deleted the script which referenced it, removing the warning.

Fixing the warning made my select2 problem go away.

a few things to help you trace what's wrong.

1. Are you able to get select2 to work in the most trivial of situations? (strip everything else from the page and ONLY use a select2 droplist to make sure your select2 libraries are working)
2. If you can get #1 to work I'd wager you have some javascript in another file which is interfering with your select2 droplist. Disable other js features one at a time to see which one is the culprit.
3. Good luck! keep an eye on your console and network tabs to be sure your js libraries are loading and don't have errors or warnings.

Answer 2

Your text field's id and your select2's selector do not match. You should change the selector to #TitleName or the text field id to Title.