autocomplete - autocomplete textfield 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'); ?>

score 2 · Accepted Answer

ここにオートコンプリートの私のコード

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();
}

オートコンプリートフィールドと隠しフィールドを作成します (ビューファイル内、例 _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)}'
    ),
)); ?>

オートコンプリートで取得する値を設定する JavaScript 関数を作成します。注意: change イベントのみを使用してください。これ以上は必要ありません。この例では、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');
    }
}

score 0 · Accepted Answer

あなたの状況では、クライアント側で CJuiAutoComplete の代わりにプレーンな JQuery から始めます。JQuery UI ドキュメントには、http://jqueryui.com/autocomplete/#custom-dataに、ソースコードが動作する優れたデモがあります。物事を機能させるには、次の 3 つの重要な手順があります。

文字列ではなく、JSON オブジェクトの配列としてデータを提供します。
カスタム_renderItem関数を使用して、JSON オブジェクトを読み取り可能な文字列にレンダリングします。
カスタムselect関数を使用してname、選択した JSON オブジェクトの表示をテキストフィールドに記録idし、このオブジェクトの記録を非表示フィールドに記録します。

ステップ 1 を行うには、EAutoCompleteAction のコメントアウトされた部分のコメントを解除し、その上の 2 行を削除する必要があります。alert()その後、メッセージにアイテム ID と名前が表示されるはずです。

ステップ 2 (オーバーライド_renderItem) は、CJuiAutoComplete で行うのが特に難しいため、単純な JQuery UI を使用することを提案しました。プレーンな JQuery UI の例については、上記のリンクを参照してください。CJuiAutoComplete の例は、Yii ドキュメントのコメントセクションにあります: http://www.yiiframework.com/doc/api/1.1/CJuiAutoComplete#c8376。ステップ 2 の後、読みやすいオートコンプリートの提案が表示されるはずです。

ステップ3を行うには、次のようなものを追加する必要があります

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

テキストフィールドのIDであり、非表示のフォームフィールドのIDでselectある場合は、関数に追加します（そうするには、いくつかの変更が必要です）。organisation_nameorganisation_id

autocomplete - autocomplete textfield CJuiAutoComplete ウィジェット yii 隠しフィールド ID と表示名を格納

2 に答える 2

Related

Reference