Как реализовать изображение в сценарии автозаполнения?

Question

Я пытаюсь добавить изображение в авто полный скрипт. Вот мой код, пожалуйста, помогите исправить.

Вот мой Countroller является

function getsearch($c_id) 
{ 
    $searchTerm = $_GET['term']; 
    $query = $this->db->query("SELECT state_name FROM state WHERE country_id = '".$c_id."' and state_name LIKE '".$searchTerm."%'"); 
    foreach ($query->result_array() as $row) 
    { 
    $data[] = $row['state_name']; 
    } 
echo json_encode($data); 
} 

Мой Вид ниже

<input type="text" placeholder="Enter Location (E.g. Ontario)" class="sarbx ani-1" name="location" id="compnies_id"> 

Java Script

function state_search() 
{ 
$(function() { 

var country = $('#countries').val(); 
var controller = 'directories/getsearch'; 

var url = '<? echo base_url();?>'; 
    $("#compnies_id").autocomplete({ 
      source: url+''+controller+'/'+country 

    }); 
}); 
} 

Заранее спасибо. :)

Answer 1

Autocomplete, являющийся виджемом, реализует API-интерфейс Widget Factory, с помощью которого вы можете расширить свою функциональность, одна из таких точек расширения - это _renderItem. Вы можете изменить способ рендеринга элементов.

Предположим, ваш сервер возвращает данные выборки, как этот

$send =array(
     array("label" => "javascript", "value" => "1" ,"img"=>"javascript.png"), 
     array("label" => "php", "value" => "2" , "img"=>"php.ico") 
    ); 

echo json_encode($send); 

я не написал фильтрации часть только для простоты

Перед инициализацией вашего автозаполнения ovveride _renderItem с помощью виджета заводскую API

$.widget("app.autocomplete", $.ui.autocomplete, { 
    _renderItem: function(ul, item) { 
     var result = this._super(ul, item); //get default functionality from parent 
     if (item.img) {      //if have image then add 
      result.find("a") 
        .addClass("ui-menu-item-icon") 
        .css("background-image", "url(" + item.img + ")"); 
     } 
     return result; 
    } 
}); 

Поэтому, когда новые данные поступают с сервера, вместо этого он вызывается над кодом перед рендерингом каждой опции. item - индивидуальный кортеж в вас, например. для пункта 3-го момента будет {label: "python", value: "3" ,img: "python.png"}, поэтому мы просто добавим фон <li> или <a> (предпочтительно). ul - это список, в который jqueryui добавит вашу пользовательскую запись, чтобы, наконец, this._super(ul, item) извлекал родительские (по умолчанию) функции, мы просто используем это и немного модифицируем его, как ваш подкласс, для создания пользовательских элементов управления в языковых инструментах GUI.

Теперь инициализировать

$("#compnies_id").autocomplete({ 
     source: url+''+controller+'/'+country 
}); 

Это все

Обратите внимание, что существует альтернативный подход упоминается более here речь идет о возвращая <li> (с тем, что содержимое внутри вас нужно), и она будет использоваться, чтобы показать варианты , который работает тоже, но только проблема с этим - вам нужно будет добавить классы ui (используемые для стилизации и доступности jqueryui) на этих <li> самостоятельно, чтобы ваша разметка могла выглядеть так

<li><a style="background-image: url(javascript.ico);">JAVASCRIPT</a></li> 

в то время как это обычно должно быть

<li class="ui-menu-item" role="presentation"><a class="ui-menu-item-icon ui-corner-all" id="ui-id-3" style="background-image: url(javascript.ico);">JAVASCRIPT</a></li> 

Jquery не добавит эти clases автоматически для вас, когда вы составляете <li> s

https://jsfiddle.net/ttnd0sp8/