Отобразить пользовательский макет в автозаполнении в 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.
• Создайте файл php с именем myAutoComplete.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 в виджетах автозаполнения, чтобы добавить дополнительный контент в раскрывающийся список . Эта функция появляется, потому что мы использовали наш новый настраиваемый виджет автозаполнения.

Классы задаются автозаполнением 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 для создания своей собственной темы для автозаполнения.