Yii Autocomplete Suggest And Append Option

Hi all

i wanted to use autocomplete in one of the my forms.i googled it and found a very good example from here

but there is an issue when i implemented the autocomplete functionality

when i type something in textbox the suggestion list is displayed below and i can select items from the list.when i select an item from the list the id of the selected item is saved in the hidden field as it should be.

the problem im facing when i dont select any item from the list and get out of the textbox using tab.let me explain with the help of an example

my autocomplete displays list of names when i press character ‘a’.list appears suggesting alan,alax,adam etc

if i select adam from the list then the id for adam will be saved in the hidden field

but if i do not select adam from the list instead i type it.then the hidden field does not have the id of adam.

i want something like when im typing the top most item from the suggestion is automatically appended to the my input and also selected from the list so that when i press tab the top most suggestion item is selected

just like in visual studio 2008 windows forms combobox with suggest append as autocomplete mode.

i want the exact same thing or any thing close to it

please help its urgent

thanks

Check this

Hi,

that’s true! Your post suggested me to try the use case you’ve described: I can repoduce the same thing, hidden field is not updated when typing all the response in the autocomplete input box.

Below are my options in CJuiAutoComplete config array:




		'options'=>array(

			'minLength'=>'2',

			'select' => 'js:function(event, ui){ jQuery("#Vol_immat").val(ui.item["immat"]); }'// have also tried with 'change'

		),

THANKS FOR THE REPLY

I THINK YOU DID NOT UNDERSTAND MY QUESTION

THE LINK YOU SUGGESTED IS COMPLETELY DIFFERENT AS IT DOES NOT ALLOW DISPLAY VALUE AND ID VALUE AT THE SAME TIME.

PLEASE TAKE A LOOK AT THIS LINK.

I WANT TO SAME FUNCTIONALITY WITH CJUIAUTOCOMPLETE

Hi,

please show us your code …

i just implemented this wiki for testing

my code is exactly the same.the datasource is working fine because i can see the suggestion list.

here is the code for my view


$this->widget('ext.myAutoComplete', array(

    'model'=>$model,

    'attribute'=>'user_id',

    'name'=>'user_autocomplete',

    'source'=>$this->createUrl('orders/usersAutoComplete'),  // Controller/Action path for action we created in step 4.

    // additional javascript options for the autocomplete plugin

    'options'=>array(

        'minLength'=>'0',

    ),

    'htmlOptions'=>array(

        'style'=>'height:20px;',

    ),        

));

OK,

I think that the trouble comes from the javascript statements. In your wiki:




 if (!isset($this->options['select'])) {

      $this->options['select'] = 'js:function(event, ui) {

            $("#'.$id.'").val(ui.item.label);

            $("#'.$attr_id.'").val(ui.item.id);

        }';

    }



id value from autocomplete is passed to hidden field by using an “onSelect” js event. If you type all the response in the autocomplete text box, then there is no “onSelect” event and the id could not be send. Try with ‘change’ instead of ‘select’ (or maybe ‘keyup’) …

ok thanks im testing it now.ill let you know as soon as im dont

here is another link that does exactly what i want to do its a jquery plugin.

http://jsearchdropdown.sourceforge.net/

can you please visit this site and tell me how can i implement it in yii inside my view file

I had a look at the jquery plugin you’ve mentionned. There is no way to handle dynamic db search as used in the wiki article. See plugin settings:




$(document).ready(function() {

	$("select").searchable({

		maxListSize: 100,						// if list size are less than maxListSize, show them all

		maxMultiMatch: 50,						// how many matching entries should be displayed

		exactMatch: false,						// Exact matching on search

		wildcards: true,						// Support for wildcard characters (*, ?)

		ignoreCase: true,						// Ignore case sensitivity

		latency: 200,							// how many millis to wait until starting search

		warnMultiMatch: 'top {0} matches ...',	// string to append to a list of entries cut short by maxMultiMatch 

		warnNoMatch: 'no matches ...',			// string to show in the list when no entries match

		zIndex: 'auto'							// zIndex for elements generated by this plugin

   	});

});



You will loose all the ajax facilities offered by CJuiAutocomplete …

Anyway, if you want to use it, you can try to write your own widget for that (see step 1 of the wiki article as a basis)

thanks for the reply

i have been trying to use change event as well as the keyup event as you told me in your previous post with no success.here is the code for my updated version of extension




<?php

Yii::import("zii.widgets.jui.CJuiAutoComplete");

class myAutoComplete extends CJuiAutoComplete

{

 

    /**

     * Run this widget.

     * This method registers necessary javascript and renders the needed HTML code.

     */

    public function run()

    {

        list($name,$id)=$this->resolveNameID();

 

    // Get ID Attribute of actual hidden field containing selected value

    $attr_id = get_class($this->model).'_'.$this->attribute;

 

        if(isset($this->htmlOptions['id']))

            $id=$this->htmlOptions['id'];

        else

            $this->htmlOptions['id']=$id;

 

        if(isset($this->htmlOptions['name']))

            $name=$this->htmlOptions['name'];

 

        if($this->hasModel()) {

            echo CHtml::textField($name,$this->value,$this->htmlOptions);         

      echo CHtml::activeHiddenField($this->model, $this->attribute);

        }else {

            //echo CHtml::textField($name,$this->value,$this->htmlOptions);       

			//	 CHtml::hiddenField($name,$this->value,$this->htmlOptions);          

        }

 

        if($this->sourceUrl!==null)

            $this->options['source']=CHtml::normalizeUrl($this->sourceUrl); 

        else

            $this->options['source']=$this->source;

 

    // Modify Focus Event to show label in text field instead of value

    if (!isset($this->options['focus'])) {

      $this->options['focus'] = 'js:function(event, ui) {

          $("#'.$id.'").val(ui.item.label);

            return false;

        }';    

    }

 

    if (!isset($this->options['select'])) {

      $this->options['select'] = 'js:function(event, ui) {

            $("#'.$id.'").val(ui.item.label);

            $("#'.$attr_id.'").val(ui.item.id);

        }';

    }

	

	if (!isset($this->options['change'])) {

      $this->options['change'] = 'js:function(event, ui) {

      	$("#'.$id.'").val(ui.item.label);

            $("#'.$attr_id.'").val(ui.item.id);

        }';

		

    }

 

    $options=CJavaScript::encode($this->options);

    //$options = $this->options;

 

        $js = "jQuery('#{$id}').autocomplete($options);";

 

        $cs = Yii::app()->getClientScript();

        $cs->registerScript(__CLASS__.'#'.$id, $js);

    }

}



using this code i get the following jquery error

TypeError: ui.item is null

also checked the the value in the hidden field but the value is not stored there.

what could be the problem??

Can someone post an update to this issue? This is really a bug that autocomplete does not automatically select fully typed correct value from its dropdown.

Luckily I’ve just found a solution. Scott Gonzalez Jquery UI autoselect plugin does the job.

All that needs to be done:


Yii::app()->clientScript->registerCoreScript('jquery.ui');  

Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl.'/js/jquery.ui.autoselect.js');



Shouldn’t it be included in Yii core?