这是我之前得到的结果的图像。
我想要的结果是
所以首先我改变了只给我一列数据的函数。这是来自我的控制器的代码。
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 文件
- 现在将此代码粘贴到此文件中
代码
<?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选项来在下拉列表中添加额外的内容。我们之所以获得此功能，是因为我们使用了新的自定义自动完成小部件。