Question

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

我的区长是

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

    });
});
}

提前致谢。：）

Answer 1

作为小部件的自动完成实现了Widget Factory API，您可以通过它扩展其功能，一个这样的扩展点是_renderItem。您可以更改项目的呈现方式。

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

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

echo json_encode($send);

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

在使用widget factory 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中的单个元组，例如。对于第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>（包含您需要的内容），它将用于显示选项，这些选项也有效但只有问题那就是你需要在那些<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/

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

1 个答案: