在 Yii 的自动完成中显示自定义布局

Posted 2023-05-08

【中文标题】在 Yii 的自动完成中显示自定义布局

【英文标题】：Display custom layout in autocomplete in Yii

【发布时间】：2013-04-01 01:00:16

【问题描述】：

我的问题是，我想自定义自动完成的下拉列表。下面是我尝试过的代码，但它没有按我想要的方式显示。

<?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> 附加到它，而不需要任何类。但它不起作用并显示默认下拉列表。

谢谢

【问题讨论】：

很久以前用过 yii.... 但只是一个指针，（我可能错了），return $( "<li>" ) 不应该是 return $( "<li></li>" ) 吗？

@itachi 是的，确实如此，我也尝试过，但没有任何反应，结果相同....

【参考方案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();

要完成处理多列数据结果，我们需要我们自己的小部件，它可以让我们选择处理该结果。这段代码我取自here。

在哪里保存这个文件？

进入 project_directory\protected\extensions 文件夹。

注意

此路径适用于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 选项来在下拉列表中添加额外的内容。我们之所以获得此功能，是因为我们使用了新的自定义自动完成小部件。

【参考方案2】：

这些类是由 jQuery 自动完成设置的，所以这不是 Yii 特有的。不幸的是，您不能像那样覆盖它们。

您可以为它使用的类创建自己的自定义 CSS，如下所述： Jquery autocomplete styling

或者使用 'open' 方法在下拉菜单打开时修改样式。这也在上面的链接下进行了解释，但在下面。

更新： 根据链接的答案并使用您的示例，您可以使用以下方法更改 <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 为自动完成创建自己的自定义主题。

【讨论】：

我想用<li><a><div>标签创建新的下拉列表而不改变css ..:)

等一下...你是说默认下拉列表不包含<li><a> 对你来说！？那么它会产生什么？

它生成了默认的<ul><li>，我想用其他信息转换这个下拉列表，这就是我想自定义它的原因。

我明白了...不要认为自动完成小部件不可能...对不起:(