自动填充文本字段CJuiAutoComplete小部件yii存储隐藏的字段ID并显示名称

时间:2012-12-05 14:31:40

标签: autocomplete yii

我正在寻找自动完成工作,方法是在自动完成的文本字段中显示名称并存储隐藏的字段ID值。

当我检查网络时,我得到名称和ID。但是能够显示名称,但是它没有为记录选择id,因此无法存储id

任何人都可以给我任何用于自动完成的链接/代码。是否有任何链接/代码正在运作..

自动完成类:::

class EAutoCompleteAction extends CAction{
public $model;
public $attribute;
public $id;
private $results = array();
public $returnVal = '';
public function run()
{
    if(isset($this->model) && isset($this->attribute)) {
        $criteria = new CDbCriteria();
        $criteria->compare($this->attribute, $_GET['term'], true);
        $model = new $this->model;
        foreach($model->findAll($criteria) as $m)
        {
            $this->results[] = $m->{$this->attribute};
            $this->results[] = $m->{$this->id};
            //$this->results[] = array(
            //      'name' => $m->{$this->attribute},
            //      'id'=> $m->id
            //);


        }
    }

    echo CJSON::encode($this->results);
}
}

我正在使用像这样的控制器/动作::

public function actions()
{
    return array(
        'aclist'=>array(
            'class'=>'application.extensions.EAutoCompleteAction',
            'model'=>'Organisation', //My model's class name
            'attribute'=>'name', //The attribute of the model i will search


        )


}

在我看来是form.php。

 <div class="row">
    <?php echo $form->labelEx($model,'organsiation'); ?>
    <?php echo $form->hiddenField($model,'organisation_id',array()); ?>
    <?php
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'attribute'=>'organisation_id',
'model'=>$model,
'sourceUrl'=>array('benefit/aclist'),
'value'=>'Please select',
'name'=>'name',
'id'=>'organisation_id',
'options'=>array(
    'minLength'=>'2',
     'select'=>"js:function(event, ui) {
 alert(ui.item.id);
                                    $('#organisation_id').val(ui.item.id);
                                    }",
),
'htmlOptions'=>array(
'size'=>45,
'maxlength'=>45,
),
)); ?>
<?php echo $form->error($model,'organisation_id'); ?>

2 个答案:

答案 0 :(得分:2)

这是我的自动填充代码

  1. 创建一个返回json

    的动作
    public function listaItemMarcaAction(){
        $cmd = Yii::app()->db->createCommand();
        $cmd->select('id, nombre as value, nombre as label, pais_origen');
        $cmd->from('item_marca');
        $cmd->where('nombre like :term', array(':term'=>'%'.request()->getParam('term').'%'));
        $data = $cmd->queryAll();
        header('Content-type: application/json');
        echo CJavaScript::jsonEncode($data);
        Yii::app()->end();
    }
    
  2. 创建自动填充字段和隐藏字段(在视图文件中,例如_form.php)

    <?php echo $form->labelEx($model,'marca_id'); ?>
    <?php echo $form->hiddenField($model,'marca_id'); ?>
    <?php $this->widget('zii.widgets.jui.CJuiAutoComplete', array(
        'name'=>"Item[marca]",
        'value'=>$model->isNewRecord ? null : $model->marca->nombre,
        'sourceUrl'=>Yii::app()->createUrl('/item/listaitemmarca'),
        'options'=>array(
            'minLength'=>1,
            'change'=>'js:function(event,ui){fn_item_data(event,ui)}'
        ),
    )); ?>
    
  3. 创建一个javascript函数,通过自动完成设置值retreives。注意:只使用更改事件,不再需要。在示例中,ActiveRecord是'Item',然后输入的id将是Item_marca_id和Item_marca。

    function fn_item_data(event,ui){
        if(!ui.item){
            $("#Item_marca_id").val("");
            $("#Item_marca").val("");
        }else{
            $("#Item_marca_id").val(ui.item.id);
            $("#Item_marca").val(ui.item.value);
            //and use ui.item.pais_origen for another things
            if(ui.item.pais_origen == 'EEUU') alert('ok');
        }
    }
    

答案 1 :(得分:0)

在你的情况下,我将从客户端的普通JQuery而不是CJuiAutoComplete开始。 JQuery UI文档有一个很好的演示,其中包含http://jqueryui.com/autocomplete/#custom-data的工作源代码。让事情有效的方法有三个基本步骤:

  1. 将数据作为JSON对象数组提供,而不是字符串。

  2. 使用自定义_renderItem函数将JSON对象呈现为可读字符串。

  3. 使用自定义select函数将所选JSON对象的可见name记录到文本字段中,并将此对象的id记录到隐藏字段中。

  4. 要进行第1步,您需要取消注释EAutoCompleteAction的注释部分,并删除它上面的两行。之后,您应该能够在alert()消息中看到商品ID和名称。

    第2步(覆盖_renderItem)对于CJuiAutoComplete来说特别棘手,这就是我建议使用普通JQuery UI的原因。有关使用普通JQuery UI的示例,请参阅the above link。可以在Yii文档的评论部分找到CJuiAutoComplete的示例:http://www.yiiframework.com/doc/api/1.1/CJuiAutoComplete#c8376。在第2步之后,您应该能够看到可读的自动填充建议。

    要制作第3步,您需要添加类似

    的内容
    $('#organisation_name').val( ui.item.name );
    

    进入select函数,前提是organisation_name是文本字段的ID,而organisation_id是隐藏表单字段的ID(您需要进行一些更改才能使其成为)。