搜索框结果未显示在网页中

问题描述 投票：0回答：1

我创建了一个搜索框。在框中，如果我输入任何数字，它将搜索 2 个 Google 表格之间的所有数据并返回结果。现在搜索正在正确执行，并且 clud 正在获取正确的数据，但数据未显示在网络中。我在谷歌网站中使用这个搜索框。我在 ChatGPT 的帮助下开发了代码，但无法理解为什么结果没有显示。

这是我的代码.gs

function searchSheets(contactNumber) {
var oldSheetId = '15cX2CuPCic21X4v2twgfLWi6_FN455tWyPORZUieqPk';
var newSheetId = '1VC6L6e-xMQ2CTbLR8SSOMug6GxqWPATcCtaVgUSll54';

var oldSheet = SpreadsheetApp.openById(oldSheetId).getSheetByName('OLD');
var newSheet = SpreadsheetApp.openById(newSheetId).getSheetByName('2024');

var oldData = oldSheet.getDataRange().getValues();
var newData = newSheet.getDataRange().getValues();

var combinedData = oldData.concat(newData);

var filteredData = combinedData.filter(function(row) {
return row[5].toString() === contactNumber.toString();
  });

Logger.log('Filtered Data: ' + JSON.stringify(filteredData));

return filteredData;
}

function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}

这是我的index.html

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <script>
function searchContact() {
const contactNumber = document.getElementById('contactNumber').value;
google.script.run.withSuccessHandler(displayResults).searchSheets(contactNumber);
    }

function displayResults(data) {
console.log('Received data:', data); // Add this for debugging
const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = ''; // Clear previous results

if (data.length === 0) {
resultsDiv.innerHTML = '<p>No results found.</p>';
return;
      }

const table = document.createElement('table');
table.border = 1;

const headers = [
        'Timestamp', 'Submitted By', 'Type of Request', 'Update For (LM Name/Team Name)', 
        'Customer Name', 'Customer Mobile No', 'Query Type', 'Lead Number', 
        'Remarks', 'Source Name', 'Location Name'
      ];

const headerRow = document.createElement('tr');
headers.forEach(header => {
const th = document.createElement('th');
th.appendChild(document.createTextNode(header));
headerRow.appendChild(th);
      });
table.appendChild(headerRow);

data.forEach(row => {
const rowElement = document.createElement('tr');
row.forEach(cell => {
const cellElement = document.createElement('td');
cellElement.appendChild(document.createTextNode(cell));
rowElement.appendChild(cellElement);
        });
table.appendChild(rowElement);
      });

resultsDiv.appendChild(table);
    }
  </script>
</head>
<body>
<h1>Search Contacts</h1>
<label for="contactNumber">Contact Number:</label>
<input type="text" id="contactNumber">
<button onclick="searchContact()">Search</button>
<div id="results"></div>
</body>
</html>

所以，我不确定为什么数据没有显示。

下面是执行日志中的示例，数据被正确提取
2024 年 8 月 7 日下午 5:53:24 信息 过滤后的数据：[["2024-08-03T17:21:04.450Z","[电子邮件受保护]","测试请求类型","测试更新","测试客户 12",92872772728,"商业销售",344432,"测试输入21","电子邮件","电子邮件"]]
google-sheets google-apps-script web-applications google-sites
1个回答
0
投票

根据您提供的所有信息和代码，我尽力在我这边复制该问题。经过一段时间的实验，我发现当 

timestamp
列上存在格式时，结果不会显示，这可能是 Google Sheets 自动放置的。

为了解决这个问题，我修改了您的代码，特别是

code.gs
，以便所有数据在使用之前都转换为纯文本，以便于处理，并且它对我有效。

下面的代码是您的更新版本。

代码.gs

function searchSheets(contactNumber) {
var oldSheetId = '1rrcuUbtazh_G0DshVWntoGRdG1AblkM2TUnrCDHlAGc';
var newSheetId = '1pRKS_Q0w7Yrtz0qqpSOyLOzkmCl3fVQQ9q6DdJYow08';

var oldSheet = SpreadsheetApp.openById(oldSheetId).getSheetByName('OLD');
var newSheet = SpreadsheetApp.openById(newSheetId).getSheetByName('2024');

 //Added setNumberFormat('@STRING@') to convert the data into plain text.
var oldData = oldSheet.getDataRange().setNumberFormat('@STRING@').getValues();
var newData = newSheet.getDataRange().setNumberFormat('@STRING@').getValues();

var combinedData = oldData.concat(newData);

var filteredData = combinedData.filter(function(row) {
return row[5].toString() === contactNumber.toString();
  });

Logger.log('Filtered Data: ' + JSON.stringify(filteredData));

return filteredData;
}

function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}

index.html

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <script>
function searchContact() {
const contactNumber = document.getElementById('contactNumber').value;
google.script.run.withSuccessHandler(displayResults).searchSheets(contactNumber);
    }

function displayResults(data) {
console.log('Received data:', data); // Add this for debugging
const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = ''; // Clear previous results

if (data.length === 0) {
resultsDiv.innerHTML = '<p>No results found.</p>';
return;
      }

const table = document.createElement('table');
table.border = 1;

const headers = [
        'Timestamp', 'Submitted By', 'Type of Request', 'Update For (LM Name/Team Name)', 
        'Customer Name', 'Customer Mobile No', 'Query Type', 'Lead Number', 
        'Remarks', 'Source Name', 'Location Name'
      ];

const headerRow = document.createElement('tr');
headers.forEach(header => {
const th = document.createElement('th');
th.appendChild(document.createTextNode(header));
headerRow.appendChild(th);
      });
table.appendChild(headerRow);

data.forEach(row => {
const rowElement = document.createElement('tr');
row.forEach(cell => {
const cellElement = document.createElement('td');
cellElement.appendChild(document.createTextNode(cell));
rowElement.appendChild(cellElement);
        });
table.appendChild(rowElement);
      });

resultsDiv.appendChild(table);
    }
  </script>
</head>
<body>
<h1>Search Contacts</h1>
<label for="contactNumber">Contact Number:</label>
<input type="text" id="contactNumber">
<button onclick="searchContact()">Search</button>
<div id="results"></div>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2025. All rights reserved.