Автозаполнение из Materialise CSS не работает (Javascript + Google Apps Script) - PullRequest
Новая
       63

Автозаполнение из Materialise CSS не работает (Javascript + Google Apps Script)

0 голосов
/ 30 апреля 2020

Я написал следующий код в Google Apps Script. Мой код HTML использует автозаполнение из Materialise. css Однако автозаполнение не выполняется. Я беру данные для автозаполнения с листа Google с идентификатором, указанным ниже.

Голова 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>

1 Ответ

0 голосов
/ 30 апреля 2020

Для начала - вам не хватает класса .autocomplete. Это очень важно - это класс, который Materialise использует для превращения обычного ввода в автозаполнение. 

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

Всегда используйте разметку из документов , пока вы не освоитесь с фристайлом.

Ручка , чтобы продемонстрировать важность имени класса.

...