使用 Google 表格中的图像填充 Jquery 自动完成功能

Question

我使用以下代码从 Google 电子表格填充 jQuery 自动完成列表以显示用户名建议：

Autocomplete.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。这是一个 sn-p 示例，说明了我要实现的目标。有什么方法可以修改这两个代码以确保图片网址是从同一个 Google 电子表格中提取的？

$(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 并创建一个对象以与 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”列中。如果您的实际情况与此不同，请修改脚本。