Materialise CSS 的自动完成功能不起作用（Javascript + Google Apps 脚本）

Question

我在 Google Apps 脚本中编写了以下代码。 我的 HTML 代码正在使用 Materialize.css 的自动完成但是，自动完成没有运行。 我从下面提到的 ID 的谷歌表格中获取自动完成数据。

html磁头包含很多Bootstrap CDN和Materialize CDN。 最初我认为由于 CDN 冲突，自动完成功能无法正常工作。 但情况似乎并非如此。

请帮我。

  </script>
 document.addEventListener('DOMContentLoaded', function(){     
 google.script.run.withSuccessHandler(populateCodes).getCodes(); });

function populateCodes(words)
{
  var autocomplete = document.getElementById("InputCode");
  var instances = M.Autocomplete.init(autocomplete,{data : words});
}

function FilterTables() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("InputCode");
  filter = input.value;
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      if (td.innerHTML.indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
function getCodes()
{
  var id = "1L33jDRFmDxEf3Q-RYR8uyQe6IVkSDkSU09YKusZ_8Gw";
  var ss = SpreadsheetApp.openById(id);
  var wsData = ss.getSheetByName("Data");
  var RetCodes = wsData.getRange(2, 2,wsData.getRange('B2').getDataRegion().getLastRow(),1).getValues();
  var options = {};
  var CodesR = RetCodes.map(function(o){return o[0];})
  RetCodes.forEach(function(v)
                   {
    options[v[0]] = null;

                    });
  return options;

  }
  </script>


<html>
  <head>
    <base target="_top">
         <meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
              <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
                <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
          <script src="https://www.w3schools.com/lib/w3.js"></script>
        <script src="https://www.w3schools.com/lib/w3.js"></script>
            <?!= include("page-css"); ?> 
  </head>
<body>
 <?!= include("page-js"); ?>
    <div class="row"> 
       <div class = "container">
          <div class="input-field col s3">
             <i class="material-icons prefix">textsms</i>
                <input type="text" id="InputCode"  style="width: auto alignment: center" >
                <label id = "InputLabel" for="InputCode"></label>  
             <input id='RClick' type='button' name='button' value='Details' onclick="FilterTables()">
          </div>
       </div>
    </div> 

    <div class = "container">
       <div class="input-field col s8">
          <table id="myTable">
            <?!= tablecells ?> 
          </table>
       </div>
    </div>
</body>
</html>

Answer 1

对于初学者-您缺少类.autocomplete 。 这非常关键 - Materialise 使用 class 将常规输入转换为自动完成。

<input type="text" id="InputCode"  style="width: auto alignment: center" >

始终使用文档中的标记，直到您对自由样式感到满意为止。

Pen来演示类名的重要性。

Materialise CSS 的自动完成功能不起作用（Javascript + Google Apps 脚本）

问题描述

1 个解决方案

解决方案1
0 2020-04-30 14:47:31

Materialise CSS 的自动完成功能不起作用（Javascript + Google Apps 脚本）

问题描述

1 个解决方案

解决方案1 0 2020-04-30 14:47:31

解决方案1
0 2020-04-30 14:47:31