combobox

Yii Framework Extensions

Popular Tags

combobox A jQuery combobox, based on autocomplete

Requirements
Usage
Resources

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 !

9 0

31 followers

3 442 downloads

Yii Version: 1.1

License: LGPL-3.0

Category: User Interface

Tags: combobox, jquery-ui

Developed by: ianaré

Created on: Jun 7, 2011

Last updated: 13 years ago

Downloads

combobox_1.1.tar.gz

show all

Related Extensions

User Contributed Notes 17

#4116

1 0

Super!

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

Cheers Phil

PinkBrainPlan at Jun 7, 2011, 8:20:18 PM

#4117

0 0

Ooops

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

ianaré at Jun 7, 2011, 8:33:35 PM

#4473

0 0

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

PinkBrainPlan at Jul 12, 2011, 10:32:59 AM

#4486

0 0

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

ianaré at Jul 13, 2011, 9:32:59 AM

#4611

0 0

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 ^^ )

shizo971 at Jul 26, 2011, 1:59:10 PM

#4728

0 0

multi select

how about multi select? will it be possible?

Aladdin at Aug 9, 2011, 7:21:08 AM

#6262

0 0

public $scriptSelector and protected function setSelector

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

andr2k at Dec 22, 2011, 2:08:55 PM

#6273

0 0

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?

horizons at Dec 23, 2011, 12:14:28 PM

#8872

0 0

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"}]}

maigret at Jul 5, 2012, 3:01:49 PM

#10110

0 0

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..

paejan at Oct 4, 2012, 6:28:31 PM

#10214

0 0

Demo link doesn't work

Thanks.

leocharrua at Oct 11, 2012, 5:23:47 PM

#10337

1 0

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,
    ....
));

toph at Oct 20, 2012, 12:48:31 PM

#12257

1 0

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.

__construct() at Mar 10, 2013, 10:09:53 AM

#12608

0 0

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.

Subtronic at Apr 1, 2013, 11:44:58 AM

#15528

0 0

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!

secretlm at Nov 19, 2013, 8:31:45 AM

#16106

0 0

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" )

input.data( "ui-autocomplete" )

in all places you can find it.

ianaré - thanks for the extension!

j1nn at Jan 20, 2014, 7:40:11 PM

#19342

0 0

for yii2

Is there a version of this or way to get this to work in yii2?

MozarTos at May 26, 2015, 9:41:42 AM

Categories