使用 Google 表格中的圖像填充 Jquery 自動完成

Question

我使用以下代碼從 Google 電子表格填充 jQuery 自動完成列表以顯示用戶名建議：

自動完成.html

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>

<script>
// This code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(buildTagList)
      .getAvailableTags();
});

function buildTagList(availableTags) {
  $( "#tags" ).autocomplete({
    source: availableTags
  });
}
</script>

getAvailableTags（）

function getAvailableTags() {

  var ss = SpreadsheetApp.openById("0Avt7ejriwlxudGZfV2xJUGJZLXktm2RhQU1uRUgtaXc");
  var s = ss.getSheetByName("Options");
  var data = s.getDataRange().getValues();
  var headers = 1; // number of header rows to skip at top
  var tagColumn = 0; // column # (0-based) containing tag

  var availableTags = [];
  for (var row=headers; row < data.length; row++) {
    availableTags.push(data[row][tagColumn]);
  }

  return( availableTags );
}

在我的 Google 電子表格中，我還有一個包含圖像 URL 的列，我希望在每個自動完成建議中顯示這些圖像 URL 。 這是一個片段，其中包含我要實現的目標的示例。 有沒有辦法修改這兩個代碼以確保從同一個 Google 電子表格中提取圖像 URL ？

 $(function() { $(".search").autocomplete({ source: //"autocomplete.php", [ {id:"John Doe", value:"John Doe", label:"John Doe", img:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQGIx0cvucwTL1pstrlX_m5eIurp-bFAVnvBQ&usqp=CAU"}, {id:"system Admin", value:"system Admin", label:"system Admin", img:"http://www.ericom.com/imgs/braftonArticles/3-things-every-system-admin-should-know-about-virtualization_16001411_800906167_0_14057272_500.jpg"} ], minLength: 1, select: function(event, ui) { /* var url = ui.item.id; if(url.= '') { location.href = '..;' + url, } */ }: html, true: open, function(event. ui) { $(".ui-autocomplete"),css("z-index"; 1000). } }).autocomplete( "instance" ),_renderItem = function( ul. item ) { return $( "<li><div><img src='"+item.img+"'><span>"+item.value+"</span></div></li>" );appendTo( ul ); }; });

 .ui-menu img{ width:30px; height:30px; margin:0 5px 0 0px; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <input type="text" class="search"><br>

Answer 1

我相信你的目標如下。

• 您想要從電子表格中檢索圖像的值和 URL，並希望將它們與autocomplete一起使用。
  • 您的目標可以在問題的底部腳本中看到。
• 值和 URL 位於“A”和“B”列中。

修改點：

• 在這種情況下，需要檢索 URL 並創建一個 object 以與autocomplete一起使用。
  • 就像[{id: value, value: value, label: value, img: url},,,] 。
  • 所以在你的腳本中需要修改Google Apps Script和Javascript。

當以上幾點反映到你的腳本中時，它變成如下。

修改腳本：

HTML & Javascript 端：

從：

 function buildTagList(availableTags) { $( "#tags" ).autocomplete({ source: availableTags }); }

到：

 function buildTagList(availableTags) { $( "#tags" ).autocomplete({ source: availableTags }).autocomplete( "instance" )._renderItem = function( ul, item ) { return $( "<li><div><img src='"+item.img+"'><span>"+item.value+"</span></div></li>" ).appendTo( ul ); }; }

Google Apps 腳本端：

從：

 for (var row=headers; row < data.length; row++) { availableTags.push(data[row][tagColumn]); }

到：

 for (var row=headers; row < data.length; row++) { var value = data[row][tagColumn]; var url = data[row][tagColumn + 1]; // In this modification, it supposes that URLs are put in the column "B". availableTags.push({id: value, value: value, label: value, img: url}); }

筆記：

• 在此修改中，假設 URL 放在列“B”中。 如果您的實際情況與此不同，請修改腳本。