CJuiAutoComplete onSelect not working - YII

本文关键字：YII working not onSelect CJuiAutoComplete 更新时间：2023-09-26

新到YII。我必须加载一个页面与AJAX调用从CJuiAutoComplete字段选择。

<?php
     echo CHtml::label(Yii::t('location', 'PLZ'), 'GeoData_plz'); 
    ?>
    </td><td>
    <?php 
    $this->widget('zii.widgets.jui.CJuiAutoComplete', array(
        'name' => 'GeoData[plz]',
        'source' => 'js:function(request, response) {getAutoCompleteData("plz", response);}',
        'options' => array(
            'minLength' => '0',
        ),
        'htmlOptions' => array(
            'size' => 8,
            'maxlength' => 15,
            'class'=>'addrChange'
        ),
        'value' => $model->geo_data->plz));
    ?>

我试着在htmlOptions添加不同plz的onSelect(作为提交按钮)，但它不起作用，在这里我只是想在数据库中提交不同plz的选择下面是代码。

    echo CHtml::label(Yii::t('location', 'PLZ'), 'GeoData_plz'); ?></td><td><?php $this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'id'  => 'GeoData_plz',
'name' => 'GeoData[plz]',
'source' => 'js:function(request, response)  {
getAutoCompleteData("plz", response);
}',
'options' => array(
    'minLength' => '0',
    //'select' => 'js:function(event, ui){ alert(ui.item.value) }',
),
'htmlOptions' => array(
    'size' => 8,
    'maxlength' => 15,
    'class'=>'addrChange',
    'onSelect' => 'CHtml::ajax({
    url: "'.$this->createUrl('location/getAddressTabContent').'",
    dataType: "json",
    data: {
                    loc_id: ' . $model->id . '
                },
    success: function(data) {
                    $("#addressBricks").html(data.brick_table);
                }
})'
),
'value' => $model->geo_data->plz
));

感谢您的回复，但在这里我只是想提交数据的选择，我使用了你给的代码，但它不工作

$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
          'model'=>$model,
          'attribute'=>'GeoData[plz]',
          'source'=>'js: function(request, response) {
                                        getAutoCompleteData("plz", response);
                                        $.ajax({
                                                url: "'.$this->createUrl('location/getAddressTabContent').'",
                                                dataType: "json",
                                                data: {
                                                       loc_id: ' . $model->id . '
                                                      },
                                                success: function (data) {
                                                       $("#addressBricks").html(data.brick_table);
                                                }
                                              })
                                        }',
           'options'=>array(
                            'delay'=>300,
                            'minLength'=>0,
                            'select'=>'js:function(event, ui) { 
       $.ajax({
       type:"POST",
       url:  "' . $this->createUrl('location/getAddressTabContent'') . '",
       data: {selected: ui.item.value},
       success:function(data) {$("#addressBricks").html(data.brick_table);}
       });}'
                           ),
           'htmlOptions' => array(
                            'size' => 8,
                            'maxlength' => 15,
                            'class'=>'addrChange',
                            'value' => $model->geo_data->plz,
                            'id'  => 'GeoData_plz',
                           ),

));

在选项数组中，而不是在htmlooptions:

'options'=>array(
.....
   'select'=>'js:function(event, ui) {
        //your ajax request here
        //use $.ajax() 
        //your selected item = ui.item.id
   }

我已经编辑了您的小部件。只要使用这个小部件就可以让它工作。

$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
              'model'=>$model,
              'attribute'=>'GeoData[plz]',
              'source'=>'js: function(request, response) {
                                            $.ajax({
                                                    url: "'.$this->createUrl('location/getAddressTabContent').'",
                                                    dataType: "json",
                                                    data: {
                                                           loc_id: ' . $model->id . '
                                                          },
                                                    success: function (data) {
                                                           $("#addressBricks").html(data.brick_table);
                                                    }
                                                  })
                                            }',
               'options'=>array(
                                'delay'=>300,
                                'minLength'=>1,
                               ),
               'htmlOptions' => array(
                                'size' => 8,
                                'maxlength' => 15,
                                'class'=>'addrChange',
                                'value' => $model->geo_data->plz,
                                'id'  => 'GeoData_plz',
                               ),
 ));