combobox Follow @yiiframework

A jQuery combobox, based on autocomplete

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 14 comments

#12608

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

__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

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

leocharrua at 2012/10/11 01:23pm

Demo link doesn't work

Thanks.

#10110

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

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

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

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

Aladdin at 2011/08/09 03:21am

multi select

how about multi select? will it be possible?

#4611

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

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

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

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

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

Please login to leave your comment.

combobox Follow @yiiframework

Requirements ¶

Usage ¶

Resources ¶

Total 14 comments

Leave a comment

Yii Supporters