在Yii中显示自动填充中的自定义布局

这是我之前得到的结果的图像。

我期望的结果是

所以首先我更改了只给出一列数据的函数。 这是我的控制器的代码。

 public function actionSearch() { $res =array(); if (isset($_GET['term'])) { // sql query to get execute $qtxt ="SELECT id,name,description,image FROM table_name WHERE name LIKE :name"; // preparing the sql query $command =Yii::app()->db->createCommand($qtxt); // assigning the get value $command->bindValue(":name", '%'.$_GET['term'].'%', PDO::PARAM_STR); //$res =$command->queryColumn(); // this is the function which was giving me result of only 1 column $res =$command->queryAll(); // I changed that to this to give me result of all column's specified in sql query. } echo CJSON::encode($res); // encoding the result to JSON Yii::app()->end(); } 

要完成处理多列数据结果，我们需要自己的小部件，它将为我们提供处理该结果的选项。 这段代码我从这里开始 。

在哪里保存这个文件？

• 进入project_directory \ protected \ extensions文件夹。 注意此路径适用于Windows系统。
• 创建一个名为myAutoComplete.php的php文件
• 现在将此代码粘贴到此文件中

码

 resolveNameID(); if(isset($this->htmlOptions['id'])) $id=$this->htmlOptions['id']; else $this->htmlOptions['id']=$id; if(isset($this->htmlOptions['name'])) $name=$this->htmlOptions['name']; if($this->hasModel()) echo CHtml::activeTextField($this->model,$this->attribute,$this->htmlOptions); else echo CHtml::textField($name,$this->value,$this->htmlOptions); if($this->sourceUrl!==null) $this->options['source']=CHtml::normalizeUrl($this->sourceUrl); else $this->options['source']=$this->source; $options=CJavaScript::encode($this->options); $js = "jQuery('#{$id}').autocomplete($options){$this->methodChain};"; $cs = Yii::app()->getClientScript(); $cs->registerScript(__CLASS__.'#'.$id, $js); } } 

现在您已在此处创建了扩展程序，现在您可以在视图中使用它。

视图代码

 
 widget('ext.myAutoComplete', array( 'id' => 'searchbox', 'name'=> 'autoComplete', 'source'=>'js: function(request, response) { $.ajax({ url: "'.$this->createUrl('post/search').'", dataType: "json", data: { term: request.term, brand: $("#type").val() }, success: function (data) { response(data); } }) }', 'options' => array( 'showAnim' => 'fold', ), 'htmlOptions' => array( 'placeholder' => "Search...", ), 'methodChain'=>'.data( "autocomplete" )._renderItem = function( ul, item ) { return $( "
" ) .data( "item.autocomplete", item ) .append( "
request->baseUrl.'/banner/' . '" + item.image + "\'>
" +item.description + "" ) .append("
") .appendTo( ul ); };' )); ?>  

现在你已经注意到我在自动完成小部件中使用了methodChain选项来在下拉列表中添加额外的内容。 我们获得此function是因为我们使用了新的自定义自动完成小部件。

这些类由jQuery自动完成设置，因此这不是Yii特有的。 不幸的是你无法像那样覆盖它们。

您可以为其使用的类创建自己的自定义CSS，如下所述： Jquery自动完成样式

或者使用’open’方法在打开下拉列表时修改样式。 这也在上面的链接中解释，但进一步向下。

更新：根据链接的答案并使用您的示例，您可以使用以下方法更改