Yii 1.1: combobox

A jQuery combobox, based on autocomplete
34 followers

A jQuery combobox, allowing selecting items from a list or typing them in. This is done by combining a select, text field, and button.

As it extends the included JUI widget, theming will respect your customizations.

Contributions welcome !!

Requirements

Developed and tested on Yii 1.1.7, should work on any 1.1.x branch.

Usage

Extract to your extensions folder.

In your view file :

$this->widget('ext.combobox.EJuiComboBox', array(
    'model' => $myModel,
    'attribute' => 'myAttribute',
    // data to populate the select. Must be an array.
    'data' => array('yii','is','fun','!'),
    // options passed to plugin
    'options' => array(
        // JS code to execute on 'select' event, the selected item is
        // available through the 'item' variable.
        'onSelect' => 'alert("selected value : " + item.value);',
        // JS code to be executed on 'change' event, the input is available
        // through the '$(this)' variable.
        'onChange' => 'alert("changed value : " + $(this).val());',
        // If false, field value must be present in the select.
        // Defaults to true.
        'allowText' => false,
    ),
    // Options passed to the text input
    'htmlOptions' => array('size' => 10),
));

Resources

  • Try out a demo, but note the jQuery example will remove a value if it is not in the source list. In the extension this behavior is configurable (allowText option).
  • Github Fork it !

Total 16 comments

#16106 report it
j1nn at 2014/01/20 02:40pm
Cannot set property '_renderItem' of undefined

To whom it may concern: The error above is a result of a newer jQuery version. To fix it, open combobox/assets/jquery.ui.combobox.js and change

input.data( "autocomplete" )

to

input.data( "ui-autocomplete" )

in all places you can find it.

ianaré - thanks for the extension!

#15528 report it
secretlm at 2013/11/19 03:31am
Apply style attribute for dropdownlist

I see the default style for dropdownlist is generated by the extension is 'display: none'. How do I change style for the dropdownlist?

echo CHtml::dropDownList(null, null, $data, array('id' => $id . '_select', 'style'=>'display:none;'));

I cannot change it with

style

used with

htmloptions
$this->widget('ext.combobox.EJuiComboBox', array(
                    'model' => $model,
                    'attribute' => 'min',
                    // data to populate the select. Must be an array.
                    'data' =>Yii::app()->params['data'],
                    // options passed to plugin
                    'options' => array(                                  
                        'allowText' => false,                       
                    ),
                    // Options passed to the text input                   
                    'htmlOptions' => array('placeholder' => 'Min', 'style'=>'width:70px'),
                ));

The style 'width:70px' is not applied for the dropdownlist.

Thanks for your extension!

#12608 report it
Subtronic at 2013/04/01 07:44am
trouble

I have error when i multiply use this extension in modal windows,it's error like this

Uncaught Typeerror: Cannot call method 'remove' of undefined

Object this - undefined in function destroy Error somewhere here i think (extension/combobox/assets/jquery.ui.combobox.js) :

[js]
destroy: function() {
            this.input.remove();
        this.button.remove();
            this.element.show();
        $.Widget.prototype.destroy.call(this);

Any ideas? P.S. Sorry for my English.

#12257 report it
__construct() at 2013/03/10 06:09am
Re: Separate key=>value combobox

Hi, Toph.

Thank you for your contribution.

I found a small bug:

You shoud use

echo CHtml::textField(null,($this->hasModel()?(CHtml::resolveValue($this->model,$this->attribute)):$data[$this->value]),array('id'=>$id.'_combobox'));

Instread of

echo CHtml::textField(null,($this->hasModel()?($data[$this->model->{$this->attribute}]):$data[$this->value]),array('id'=>$id.'_combobox'));

CHtml::resolveValue helps you to avoid errors in complex forms.

#10337 report it
toph at 2012/10/20 08:48am
Separate key=>value combobox

The original jQuery combobox allows for separate key=>value pairs. In order to add this functionality to the combobox I added a public property $assoc and the run() method has to be changed as follows:

public function run()
    {
        list($name, $id) = $this->resolveNameID();
 
        if (is_array($this->data) && !empty($this->data)){
            //if $data is not an assoc array make each value its key
            if($this->assoc){
                $data=$this->data;      
            }
            else{
                $data=array_combine($this->data, $this->data);
 
            }
            //does the same as array_unshift($data,null) but does not break assoc arrays
            $data=array(""=>"")+$data;
        }
        else
            $data = array();
 
        if ($this->hasModel())
            echo CHtml::activeDropDownList($this->model,$this->attribute,$data);
        else
            echo CHtml::dropDownList($name, $this->value, $data);
 
        echo CHtml::textField(null,
            ($this->hasModel()?
                $data[CHtml::resolveValue($this->model,$this->attribute)]:
                $data[$this->value]
            ),array('id'=>$id.'_combobox')
        );
 
        $this->options = array_merge($this->defaultOptions, $this->options);
 
        $options = CJavaScript::encode($this->options);
 
        $cs = Yii::app()->getClientScript();
 
        $js = "combobox({$options});";
 
        list($id, $js) = $this->setSelector($id.'_combobox', $js);
        $cs->registerScript(__CLASS__ . '#' . $id, $js);
    }

Full code on GitHub

IMPORTANT the combobox input field has "_combobox" appended to its id. The select now has the original name and id of the field.

Shout out to @_construct() for the bug fix.

An example of the usage is below

$this->widget('ext.combobox.EJuiComboBox', array(
    'model' => $myModel,
    'attribute' => 'myAttribute',
    // data to populate the select. Must be an array.
    'data' => array('Y'=>'Yii','R'=>'Rocks')
    'assoc'=>true,
    ....
));
#10214 report it
leocharrua at 2012/10/11 01:23pm
Demo link doesn't work

Thanks.

#10110 report it
paejan at 2012/10/04 02:28pm
dependent combobox

Is it possible to use this extension as nested dropDownList..? for example i want to list the city for state which was selected in the 1st select box(normal dropDownList).. if the city not listed user have option to type it down..

#8872 report it
maigret at 2012/07/05 11:01am
Ajax Support

add sourceUrl to EJuiComboBox.php

class EJuiComboBox extends CJuiInputWidget
{
/*.....*/ 
public $sourceUrl = '';
public function run()
{
/*.....*/ 
 $this->options['sourceUrl'] = $this->sourceUrl;
/*.....*/ 
}
}

in jquery.ui.combobox.js

/*.....*/ 
source: function( request, response ) {
$.ajax({
 url: options.sourceUrl ,
dataType: "json",
data: {
term: request.term
},
success: function( data ) {
response( $.map( data.users, function( item ) {
return {
label: item.label,
id: item.id,
option: this
}
}));
}
});
},
/*.....*/

widget:

$this->widget('ext.combobox.EJuiComboBox', array(
    'name' => 'myName',
    'attribute' => 'myAttribute',
**    'sourceUrl' => 'http://xyz.avantel.de/app-test/user/user/autocomplete',**
    // options passed to plugin
    'options' => array(
        // JS code to execute on 'select' event, the selected item is
        // available through the 'item' variable.
        'onSelect' => 'alert("selected value : " + item.id);',
        // JS code to be executed on 'change' event, the input is available
        // through the '$(this)' variable.
        'onChange' => 'alert("changed value : " + $(this).val());',
        // If false, field value must be present in the select.
        // Defaults to true.
        'allowText' => false,
    ),
 
));

create a action that returns json:

/*.....*/ 
public function actionAutocomplete($term='')
  {
    $crit=new CDbCriteria();
    //$crit->condition='project_id = '.$_SESSION['project_id'].' ';
    if($term) $crit->condition= "profile.lastname LIKE '".$term."%' ";
    $crit->with=array('profile'=>array('select'=>'firstname,lastname'));
    $crit->order='profile.lastname';
    foreach(User::model()->findAll($crit) as $user)
    {
      $users[] = array(
        'id'=>$user->id,
        'label'=>$user->name2,
        );
    }
 
    echo CJSON::encode(array('users'=>$users));
 
  }

/...../

json looks like this (example)

{"users":[{"id":"1","label":"Admin, Administrator"}]}
#6273 report it
horizons at 2011/12/23 07:14am
ajax autocomplete possible as data?

is it possible to use a ajax autocomplete as data? which e.g. only starts searching after X characters given?

#6262 report it
andr2k at 2011/12/22 09:08am
public $scriptSelector and protected function setSelector

What are the "public $scriptSelector;" property and "protected function setSelector" method for?

#4728 report it
Aladdin at 2011/08/09 03:21am
multi select

how about multi select? will it be possible?

#4611 report it
shizo971 at 2011/07/26 09:59am
how to use this extension with a table (of database).

Hi, i like this extension but, someone can make an example of it with a database plz. I don't understand how to build it.

best regards. ( sorry for my bad english too ^^ )

#4486 report it
ianaré at 2011/07/13 05:32am
text field

The combobox is a text field, so you can't use it like a select where the option value is different from the option text.

Maybe a normal select is a better option for you.

Another solution is make a custom JS function to update a hidden field with the value you need. You can then call this method through the 'onSelect' and/or 'onChange' events.

HTH

#4473 report it
PinkBrainPlan at 2011/07/12 06:32am
Still Value Key Problem

Hi, I wanna use this combobox with the following data strucure

Customer CustomerGroup customer_group_id customer_group_id cus_gro_name

I want the field cus_gro_name to be displayed, BUT the value to be stored is the customer_goup_id.

Thank you very much for your help!

Cheers Phil

#4117 report it
ianaré at 2011/06/07 04:33pm
Ooops

Sorry there was an error in the sample, the correct variable to send the array to is 'data'.

#4116 report it
PinkBrainPlan at 2011/06/07 04:20pm
Super!

I looked for this component so hard! Can you build a Sample with a separate Key => Value sample? If possible;)

Cheers Phil

Leave a comment

Please to leave your comment.

Create extension