如何將圖像實現爲自動完成腳本？

我想在自動完成腳本添加圖片。這是我的代碼，請幫助解決它。如何將圖像實現爲自動完成腳本？

這裏我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

如何將圖像實現爲自動完成腳本？

回答

相關問題