将过滤器结果输出到文本框中 [英] Output filter results into a text box

问题描述

我正在尝试创建一个Web应用程序脚本，其中包含一个接受用户输入并返回结果的字段.我需要它列出与输入查询关联的所有结果.

I'm trying to create a web apps script with a field that accepts user input and returns the result(s). I need it to list all the results associated with the input query.

我尝试做的事情:

1. 我已经为orderInput分配了一个实际的订单号，我能够使用Logger.log(orderMatch)获得想要返回的结果，所以我知道它可以工作.
2. 我不确定是否遇到格式问题，所以我尝试使用orderInput.toString()将orderInput转换为字符串，但这没用.
3. 起初，我试图在一个禁用的输入字段中显示它，但是它不起作用，所以我尝试使用textarea，但这也不起作用.
4. 我还尝试过在return item[0] === orderInput });
之间的各个位置移动document.getElementById("orderResults").value = (orderMatch); M.updateTextFields();
5. 我当时正在使用document.getElementById("orderNumber").addEventListener("change",orderLookup);来触发脚本的运行，但是我也尝试使用onclick="orderLookup()"创建一个按钮，但这没用.

1. I've assigned an actual order number to orderInput and I was able to get the results I wanted it to return using Logger.log(orderMatch) so I know it works.
2. I wasn't sure if I was running into a formatting issue so I tried converting orderInput to a string with orderInput.toString() and that didn't work.
3. At first I was trying to display it in a disabled input field and that didn't work so I tried using a textarea but that didn't work either.
4. I've also tried moving the document.getElementById("orderResults").value = (orderMatch); M.updateTextFields(); in various places between return item[0] === orderInput });
5. I was using document.getElementById("orderNumber").addEventListener("change",orderLookup); to trigger the script from running but I also tried creating a button with onclick="orderLookup()" but that didn't work.

这是我的脚本:

  function orderLookup() {

    var orderSheet = "Google Spreadsheet URL"

    var ss = SpreadsheetApp.openByUrl(orderSheet);
    var ws = ss.getSheetByName("Orders");
    var originalSheet = ws.getRange(2, 1, ws.getLastRow() - 1, 3).getValues();

    var orderInput = document.getElementById("orderNumber").value;

    var orderMatch = originalSheet.filter(function(item) {
      return item[0] === orderInput
    });

document.getElementById("orderResults").value = (orderMatch);
    M.updateTextFields();
  }

关于我的HTML:

      <div class="input-field col s2">
        <input value="" id="orderNumber" type="text" class="validate">
        <label class="active" for="orderNumber">Enter Order Number</label>
      </div>

      <center style="float:left;margin-left:0px;margin-top:0px;">
        <h6><b>Results</b></h6>
        <textarea id="orderResults" rows="10" cols="45" disabled="disabled" style="width:100%; height:auto"></textarea>
      </center>

推荐答案

假设:

• 单击Enter Order Number时要在工作表中查找数据.
• 您要查找第一列与您提供的输入匹配的行.
• 您希望该行中的所有数据都显示在<textarea>元素中.

• You want to look for the data in the sheet when Enter Order Number is clicked.
• You want to look for rows where first column matches the input you provided.
• You want all the data in the row to show up in the <textarea> element.

可能的解决方法如下:

1. 在label中创建一个onclick事件，该事件将在客户端运行一个函数:

1. Create an onclick event in the label, which will run a function on the client side:

<label class="active" for="orderNumber" onclick="search()">Enter Order Number</label>

1. 接下来，通过onclick事件运行以下功能.此函数调用服务器端函数(orderLookup)，该函数将在工作表中查找匹配的数据并返回结果.

function search() {
  var input = document.getElementById("orderNumber").value;
  google.script.run.withSuccessHandler(showResults).orderLookup(input);
}

1. 这是函数orderLookup:

function orderLookup(input) {
  var orderSheet = "Google Spreadsheet URL"
  var ss = SpreadsheetApp.openByUrl(orderSheet);
  var ws = ss.getSheetByName("Orders");
  var values = ws.getRange(2, 1, ws.getLastRow() - 1, 3).getValues();
  var orderMatch = values.filter(function(item) {
    return item[0] === input
  });
  return orderMatch;
}

1. 如果orderLookup返回值，则将运行另一个客户端功能，该功能将获取匹配的数据作为参数，并将其写入<textarea>:

1. If orderLookup returns a value, another client-side function will run, which will get the matching data as a parameter, and will write it to the <textarea>:

function showResults(orderMatch) {
  var matches = "";
  for(var i = 0; i < orderMatch.length; i++) {
    matches = matches.concat(orderMatch[i], "\n");
  }
  document.getElementById("orderResults").value = matches;
}

因此，完整的代码如下:

So, full code would be the following:

index.html

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
      <div class="input-field col s2">
        <input value="" id="orderNumber" type="text" class="validate">
        <label class="active" for="orderNumber" onclick="search()">Enter Order Number</label>
      </div>

      <center style="float:left;margin-left:0px;margin-top:0px;">
        <h6><b>Results</b></h6>
        <textarea id="orderResults" rows="10" cols="45" disabled="disabled" style="width:100%; height:auto"></textarea>
      </center>    
  </body>
  <script>
    function search() {
      var input = document.getElementById("orderNumber").value;
      google.script.run.withSuccessHandler(showResults).orderLookup(input);
    }
    function showResults(orderMatch) {
      var matches = "";
      for(var i = 0; i < orderMatch.length; i++) {
        matches = matches.concat(orderMatch[i], "\n");
      }
      document.getElementById("orderResults").value = matches;
    }
  </script>
</html>

Code.gs

Code.gs

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

function orderLookup(input) {
  var orderSheet = "Google Spreadsheet URL"
  var ss = SpreadsheetApp.openByUrl(orderSheet);
  var ws = ss.getSheetByName("Orders");
  var values = ws.getRange(2, 1, ws.getLastRow() - 1, 3).getValues();
  var orderMatch = values.filter(function(item) {
    return item[0] === input;
  });
  return orderMatch;
}

我希望这是您想要实现的目标.

I hope this is what you wanted to accomplish.

这篇关于将过滤器结果输出到文本框中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！