javascript - 如何将图像实现为自动完成脚本？

我正在尝试在自动完成脚本中添加图像。
这是我的代码，请帮助修复它。

这是我的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脚本

function state_search()
{
$(function() {

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

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

    });
});
}

提前致谢。 :)

最佳答案

作为窗口小部件的自动完成功能实现了窗口小部件工厂API，您可以通过其扩展功能，例如_renderItem这样的扩展点。您可以更改项目的呈现方式。

假设您的服务器返回这样的样本数据

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

echo json_encode($send);

我没有为简单起见编写过滤部分

在使用小部件工厂API初始化自动完成ovveride _renderItem之前

$.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是json中的单个元组，例如。第三次的项目将是{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>（带有您需要的任何内容），它将用于显示选项，该方法也有效，但唯一的问题是您需要添加您自己的<li>上的ui类（用于jqueryui的样式和可访问性），因此您的标记可能最终看起来像

<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>

当您提供<li>时，jQuery不会自动为您添加这些分类

https://jsfiddle.net/ttnd0sp8/