使用 Yii CJuiAutoComplete 自动完成其他字段

Question

我遇到以下情况：

包含邮政编码字段和城市字段的表单。

我想在邮政编码字段上自动完成，因此当用户输入例如 1000 时，自动完成值将显示“1000 - 布鲁塞尔”。选择此值后，邮政编码字段将填写 1000，而城市字段将填写布鲁塞尔。

邮政编码、城市和连接信息将来自 mysql 数据库：

我的自动完成功能仅适用于邮政编码，但不知道如何实现所描述的效果（= 填充第二个字段）。

当前表单代码：

<div class="row">
        <?php echo $form->labelEx($model,'PostalCode'); ?>
        <?php //echo $form->textField($model,'PostalCode',array('size'=>10,'maxlength'=>50));

                $this->widget('zii.widgets.jui.CJuiAutoComplete', array(
                'name'=>'PostalCode',
                'value'=>$model->PostalCode,
            //'source'=>$people, // <- use this for pre-set array of values
                'source'=>$this->createUrl('BeCity/GetBelgianPostalCodes'),// <- path to controller which returns dynamic data
                // additional javascript options for the autocomplete plugin
                'options'=>array(
                        'minLength'=>'1', // min chars to start search
                        'showAnim'=>'fold'
                ),
                ));

                ?>
        <?php echo $form->error($model,'PostalCode'); ?>
    </div>

当前控制器动作代码：

public function actionGetBelgianPostalCodes()
        {                     
            $res =array();

            if (isset($_GET['term'])) {
                    // http://www.yiiframework.com/doc/guide/database.dao
                    $qtxt ="SELECT
                            DISTINCT
                            bc.PostalCode as PostalCode,
                            bc.NameNL as CityName,
                            CONCAT(bc.PostalCode, ' - ', bc.NameNL) as FullCityName
                            FROM be_city bc
                            WHERE bc.PostalCode LIKE :qterm
                            ORDER BY bc.PostalCode, bc.NameNL ASC";
                    $command =Yii::app()->db->createCommand($qtxt);
                    $command->bindValue(":qterm", $_GET['term'].'%', PDO::PARAM_STR);
                    $res =$command->queryColumn();
            }

            echo CJSON::encode($res);
            Yii::app()->end();
        }

不确定控制器操作是否完全正确，$command->queryAll() 似乎不起作用，所以我改用 queryColumn() 但它只返回第一列？

有什么提示吗？

另外，还有一个问题，我希望控制器操作的链接是动态的。如果用户在之前的 Country 下拉列表中选择了比利时，则应调用“BeCity/GetBelgianPostalCodes”。如果是法国，应该是“FrCity/GetFrenchPostalCodes”。这可能吗？如何实现？

谢谢

Answer 1

这是我找到的方式（我为您的应用程序进行了调整，所以我希望没有错别字......）我还将小部件的名称更改为 myPostCode 最好可能保留 Yii 给出的默认名称：

<?php
        $this->widget('zii.widgets.jui.CJuiAutoComplete', array(
        'name'=>'myPostCode',
        'value'=>$model->PostalCode,
        'source'=>$this->createUrl('BeCity/GetBelgianPostalCodes'),
        'options'=>array(
                'minLength'=>'1', // min chars to start search
                'showAnim'=>'fold'
                //focus option will tell what is displayed in field during the selection
                'focus'=> 'js:function( event, ui ) {
                    $( "#myPostCode" ).val( ui.item.postalcode );
                    return false;
                }',
                //select function will tell where go each field
                'select'=>'js:function( event, ui ) {
                    $( "#myPostCode" ).val( ui.item.postalcode );
                    $( "#CityName" ).val(ui.item.cityname);
                    return false;
                }'
        ),
        ));

//Here is the code for the display.
//This code MUST be AFTER the widget
//It should be possible to include it in the widget but I do not know how.
// You may change the line "<a>"+item.postalcode... with what you want to display but must keep the a tag."

    Yii::app()->clientScript->registerScript('input', '
        $("#myPostCode").data("autocomplete")._renderItem = function( ul, item ) {
        return $( "<li></li>" )
    .data( "item.autocomplete", item )
    .append( "<a>"+item.postalcode + " - " + item.cityname+"</a>")
    .appendTo( ul );
    };');

?>

您还需要更改查询以返回所有数据的

$res =$command->queryAll();

Answer 2

如下设置Ajax选择选项：

$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
    'name'=>'PostalCode',
    'source'=>$this->createUrl('/site/getpostalcode'),
    // additional options for the autocomplete plugin
    'options'=>array(
        'minLength'=>'4',
        'select'=>"js:function(event, ui) {
                    $('#PostalCode').val(ui.item.postalcode);
                    $('#CityName').val(ui.item.cityname);
                  }",
     ),
    'htmlOptions'=>array(
        'style'=>'width: 200px;',
        'placeholder' => 'Postal Code'
    ),
));