Webページからスプレッドシートを検索する

id	name	category	description
1	ねこ	cat2	ねこの説明文。きまぐれ。あお、きいろ
2	うさぎ	cat3	うさぎの説明文。おとなしい。みどり
3	とり	cat5	とりの説明文。きびん。あお、きいろ
4	いぬ	cat1	いぬの説明文。じゅうじゅん。あか。ねこがすき
5	あおきつね	cat4	きつねの説明文。やせいてき。きいろいけなみ
6	ねこ	cat10	みどりのめ。くろいけなみ
7	ぱんだ	cat3	しろくろ
8	からす	cat2	くろいとり。おおきい
9	いぬ	cat1	あかいみみ。ちいさい
10	とり	cat9	きまぐれ。ちいさい

GAS

function doGet(e){
  let data = getData();
  let param = {};

  param.category = e.parameter.category;
  param.keyword = e.parameter.keyword;
  
  let result = extractData(param, data);
//console.log(result);
//return ContentService.createTextOutput(JSON.stringify(result, null, 2)).setMimeType(ContentService.MimeType.JSON);

/*jsonp*/
let jsonp = 'callback(' + JSON.stringify(result) + ')';
return ContentService.createTextOutput(jsonp)
.setMimeType(ContentService.MimeType.JAVASCRIPT);

}

function getData(){
  let id = 'スプレッドシートのID';
  let sheetName = 'シート1'
  let sheet = SpreadsheetApp.openById(id).getSheetByName(sheetName);
  let rows = sheet.getDataRange().getValues();
  let keys = rows.splice(0, 1)[0];
  let data = rows.map(function(row) {
    let obj = {}
    row.map(function(item, index) {
      obj[keys[index]] = item;
    });
    return obj;
  });
  return data;
}

function extractData(obj, data){
  let arr = obj.keyword.split(/,|、|\s|　/);
  let temp = [];
  for(let i=0; i<arr.length; i++){
    let sdata = (i == 0)? data : temp[i-1];
    temp[i] = sdata.filter(function(d){
      let txt = Object.values(d).join(' ');
      return txt.indexOf(arr[i]) !== -1;
    });
  }
  let result = temp[arr.length-1];
  return result;
}

javascript

gasSearch.js

let style = `<style>
#gsSbtn {
    border: 1px solid #168cd9;
    color: #fff;
    background: #09f;
    padding: 8px 12px;
    border-radius: 44px;
}
.searching {
    position: relative;
}
.searching .bar {
    position: absolute;
    height: 100%;
    border-bottom: 2px solid #68ff70;
    animation: progress 1s normal;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}
.searching .txt {
    display: block;
    position: relative;
    text-align: center;
    font-size: .8em;
}
@keyframes progress {
    0% {width: 0}
    100% {width: 100%}
}
</style>`;

document.querySelector(`head`).insertAdjacentHTML('beforeend', style);

$('#gsSbtn').on('click', function(){
    let inputW = $('#inputWord').val();
    searchkeyword(inputW);
})


function searchkeyword(sw){
    if(!sw) return;
    $('#output').html('<div class="searching"><span class="bar"></span><span class="txt">検索しています。しばらくお待ちください。</span></div>');
    const params = {
        keyword: sw
    }
    const parameter =  new URLSearchParams(params).toString();
    const extJs = document.createElement('script');
    extJs.src ='https://script.google.com/macros/s/AKfycbyktEJvWNHdsXWlSov632vEE2CGlvxtF8rE0ppa41l9DT-3xr68KSPoJUf6fWPSMvclmA/exec?' + parameter;
    document.body.appendChild(extJs);
}

function callback(json){
    let html = '';
    
    if(json.length>0){
        html += '<div>検索結果：' + json.length + '件</div>';
        let th = Object.keys(json[0]);
        html += '<table>'
        html += '<thead><tr>';
        for(let k in th){
            html += '<th>' + th[k] + '</th>';
        }
        html += '</tr></thead>';
        html += '<tbody>';
        for(let i in json){
            html += '<tr>';
            for(let j in json[i]){
                html += '<td>' + json[i][j] + '</td>';
            }
            html += '</tr>';
        }
        html += '</tbody>';
        html += '</table>'
    }else{
        html += '検索結果はありませんでした。';
    }


    $('#output').html(html);
}

html

<div><input type="text" id="inputWord"></div>
<div><button id="gsSbtn" type="button">スプレッドシート内を検索する</button></div>
<div id="output"><div id="loading"><div class="txt">ここに検索結果</div></div></div>
<div><script src="/gasSearch.js"></script></div>