自动完成文本字段 CJuiAutoComplete 小部件 yii 存储隐藏字段 id 和显示名称

Question

我正在通过在自动完成文本字段中显示名称并存储隐藏字段 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'); ?>

Answer 1

这是我的自动完成代码

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 函数来设置通过自动完成检索的值。注意：只使用更改事件，不再需要。在示例中，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');
       }
   }
   

Answer 2

在您的情况下，我将从普通的 JQuery 而不是客户端的 CJuiAutoComplete 开始。 JQuery UI 文档在http://jqueryui.com/autocomplete/#custom-data 上有一个很好的演示，其中包含工作源代码。要让事情顺利进行，需要完成三个基本步骤：

1. 以 JSON 对象数组而不是字符串的形式提供数据。

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

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

要进行第 1 步，您需要取消注释 EAutoCompleteAction 部分的注释，并删除其上方的两行。之后，您应该能够在 alert() 消息中看到项目 ID 和名称。

第 2 步（覆盖 _renderItem）在使用 CJuiAutoComplete 时特别​​棘手，这就是我建议使用纯 JQuery UI 的原因。请参阅 the above link 以获取具有纯 JQuery UI 的示例。可以在 Yii 文档的 cmets 部分找到 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（您需要进行一些更改才能做到这一点）。