自動完成textfield CJuiAutoComplete小部件yii存儲隱藏字段ID並顯示名稱

Question

我正在尋找自動完成工作，通過在自動完成文本字段中顯示名稱並存儲隱藏的字段id值。

我得到了姓名和身份證的，當我檢查networks..but能夠顯示的名字，但它不是採摘標識備案，從而無法存儲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

在你情我願先使用普通的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的原因。有關普通JQuery UI的示例，請參閱the above link。有關CJuiAutoComplete的示例，請參閱Yii文檔的註釋部分：http://www.yiiframework.com/doc/api/1.1/CJuiAutoComplete#c8376。第2步之後，您應該能夠看到可讀的自動填充建議。

爲了使第3步你需要像

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

添加東西到你select功能，前提是organisation_name是你的文本字段，organisation_id的id是隱藏表單域的ID（你」需要做一些改變才能實現）。

Answer 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 by自動完成。注意到：只使用改變事件，不再需要。在這個例子中，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'); 
       } 
   }