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

我想在自动完成脚本添加图片。这是我的代码，请帮助解决它。如何将图像实现为自动完成脚本？

这里我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 

    }); 
}); 
}

在此先感谢。 :)

来源

2016-10-22 Ronak Selarka

你能显示来自一个示例响应添加这些clases控制器用作源？ – Viney

作为一个小部件的自动完成实现了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);

我没有写滤波部分只是简单

通过使用插件工厂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; 
    } 
});

初始化您自动完成ovveride _renderItem之前

所以当新的数据来自服务器时，它会在渲染每个选项之前调用上面的代码。 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>

jQuery将不会自动为您，当您提供<li>小号

https://jsfiddle.net/ttnd0sp8/

来源

2016-10-23 06:56:22 Viney

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

回答

相关问题