在Yii的自动完成功能显示自定义布局(Display custom layout in autoco

我的问题是，我想自定义是我尝试过的代码，但它没有显示，因为我想autocomplete.Below的下拉列表。

<?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>它没有任何类。 但它不工作，并显示默认的下拉列表。

谢谢

Answer 1:

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

而我需要的结果是

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

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

为了完成处理，我们要求我们自己的插件的多个列中的数据结果，这将给我们的选项来处理结果。 这个代码，我取自这里 。

在哪里保存此文件？

• 里面去文件夹中。 注意此路径是Windows系统。
• 创建命名为myAutoComplete.php一个PHP文件
• 现在粘贴此文件中的代码

码

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

现在你已经在这里创建了一个扩展，现在您可以在视图中使用它。

代码查看

<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选项自动完成构件添加下拉额外的内容。 我们得到了这个功能，因为我们使用我们的新的自定义自动完成构件。

Answer 2:

该班由jQuery的自动完成，所以这是不特定的Yii设置。 不幸的是，你不能覆盖他们这样。

你可以创建自己的自定义CSS它采用如下解释类： jQuery的自动完成造型

或与“开放”的工作方法，在下拉打开时修改样式。 这也是以上，但进一步下跌的链接解释下。

更新：基于链接的答案，使用例如，你可以改变背景色为<li>使用该元素：

    $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',
                'open'=> 'js:function(e, ui) {$(".ui-menu-item").css("background-color","#FF0000");}'
        ),
));

这意味着你可以在运行中改变风格，但你不能完全摆脱类的，因为它们是硬编码到jQuery的方法。

你也可以使用的ThemeRoller来创建自己的自定义主题为自动完成。

文章来源: Display custom layout in autocomplete in Yii