在Yii的自动填充中显示自定义布局 [英] Display custom layout in autocomplete in Yii

问题描述

我的问题是，我想自定义自动填充的下拉列表。以下是我尝试过的代码，但不显示为我想要的。

My problem is, I want to customize the drop-down list of autocomplete.Below is my tried code but it is not displaying as I want.

<?php
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
    'name'=>'autoComplete',
     'value'=>'',
     'source'=>$this->createUrl('post/search'),
     // additional javascript options for the autocomplete plugin
     'options'=>array(
          'showAnim'=>'fold',
     ),'htmlOptions'=>array(
     //'onfocus' => 'js: this.value = null; $("#searchbox").val(null); $("#selectedvalue").val(null);',
     'class' => 'input-xxlarge search-query',
     'placeholder' => "Search...",
     'methodChain'=>'.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
          return $( "<li>" )
              .data( "item.autocomplete", item )
              .append( "<a>" + item.name +  "</a>" )
              .appendTo( ul );
      };'
   ),
));
?>

应该创建< li> 在没有任何类的情况下追加< a>< / a> 。但是它不起作用并显示默认的下拉列表。

It should create <li> and append <a></a> to it without any class. But it is not working and displaying the default drop-down list.

谢谢

推荐答案

这是我以前获得的结果的图像。

This is the image of the result which i was getting previously.

而我的所需结果

所以我首先改变了给我一个列数据的功能。这是我的控制器的代码。

So first of all I changed the function which was giving me only one column's data. This is the code from my controller.

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

为了完成处理多列数据结果，我们需要我们自己的小部件，给我们选择处理这个结果。我从这里获取的代码

To accomplish to process the multiple column data result we require our own widget which will give us option to process that result. This code I have taken from here.

• 进入 project_directory \protected\extensions 文件夹。 注意此路径适用于Windows系统。


• 创建一个名为 myAutoComplete.php 的php文件
  
• 现在将此代码粘贴到此文件中

• Go inside project_directory\protected\extensions folder. Note This path is for windows system.
• Create a php file named as myAutoComplete.php
• Now paste this code inside this file

<?php
// below line is necessary otherwise this class will not be able to extend the CJuiAutoComplete class
Yii::import('zii.widgets.jui.CJuiAutoComplete');  
class myAutoComplete extends CJuiAutoComplete
{
/**
 * @var string the chain of method calls that would be appended at the end of the autocomplete constructor.
 * For example, ".result(function(...){})" would cause the specified js function to execute
 * when the user selects an option.
 */
public $methodChain;
/**
 * Run this widget.
 * This method registers necessary javascript and renders the needed HTML code.
 */
public function run()
{
    list($name,$id)=$this->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);
    }
}

现在您已经在此创建了一个扩展名，现在可以

Now you have created an extension here and now you can use it in your view.

<div id="search">
        <?php
        $this->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 $( "<div class=\'drop_class\'></div>" )
                    .data( "item.autocomplete", item )
                    .append( "<a href=\'" + item.id + "\'><div style=\'width:22%; float:left;\'><img height=50 width=50 src=\'' . Yii::app()->request->baseUrl.'/banner/' . '" + item.image + "\'></div><div style=\'width:78%;float:left;\'>" +item.description +  "</div></a>" )
                    .append("<div style=\'clear:both;\'></div>")
                    .appendTo( ul );
            };'
        ));
        ?>
    </div>

现在您已经注意到，我已经在自动完成小部件中使用了 methodChain 选项，在下拉列表中添加了额外的内容，这个功能是因为我们使用了新的定制自动完成小部件。

Now you have noticed that I have used methodChain option in autocomplete widget to add extra content in drop-down. This feature we get because we have used our new customised autocomplete widget.

这篇关于在Yii的自动填充中显示自定义布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！