GoogleスプレッドシートのGASでテーブルデータをJSONに変換し、それをwebアプリケーションとして取得し、
テーブルとして表示することはできましたが、検索機能をかけたいと思い、Quicksearchを導入しようと思ったけれど、
動作をしていません。
共有スプレッドシートのリンクは隠していますが、次のようなデータが返ってきます。
#返ってくるJSONデータ
json
1[ 2 { 3 "pref_name": "都道府県名", 4 "song_title": "曲名", 5 "playing_type": "えんそうの形", 6 "instrument_and_voice_timbre": "楽器や声の音色", 7 "music_feature": "音楽の特徴", 8 "discovery_impression": "発見、感想", 9 "related_festival_and_event_what_month_where": "関連の祭りやイベント(何月ごろ、どこで)", 10 "beginning_and_origin": "始まりや由来", 11 "reference_url": "参考URL", 12 "youtube_url": "YouTube" 13 }, 14 { 15 "pref_name": "岐阜県", 16 "song_title": "春駒(はるこま)", 17 "playing_type": "祭り舞台の上", 18 "instrument_and_voice_timbre": "横笛、締め太鼓、三味線、男声", 19 "music_feature": "「はるこま、はるこま」というお囃子が歌の合間に繰り返し歌われ、三味線や笛の響きと重なって、にぎやかで楽しい感じ", 20 "discovery_impression": "区切りがはっきりして、リズミカルで勢いがある", 21 "related_festival_and_event_what_month_where": "郡上おどり、お盆、岐阜県郡上市八幡町(郡上八幡)", 22 "beginning_and_origin": "鎌倉時代のお殿様の馬のことを歌った歌だが、江戸時代馬の名産地だったことを反映しているという説もある。", 23 "reference_url": "http://www.gujohachiman.com/kanko/odori.html", 24 "youtube_url": "https://www.youtube.com/watch?v=q1DHd7CyMHg" 25 } 26]
#index.html
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>地域につたわる音楽に親しもう!</title> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 9 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 10 <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap" rel="stylesheet"> 11 <style> 12 .jumbotron { 13 background-image: url(https://lh3.googleusercontent.com/0I7sY9S1lmMONPz57YL7JzC6WBKdTr6U408GXXwNbCX9KjU-ADrM5KYP18vjQo9OlZIIBs79LhsaWQr3cTOAwLa1RnvaBEodjv6Rwc5S-FKhB1__tziahywskTCf4f40nYcO1yUD5w); 14 color: orange; 15 text-shadow: 1px 0 10px black; 16 } 17 </style> 18 19<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script> 20</head> 21 22<body> 23 <div class="jumbotron jumbotron-fluid"> 24 <div class="container"> 25 <h2 class="display-4">地域に伝わる音楽にしたしもう!</h2> 26 </div> 27 </div> 28 <form action="#"> 29 <input type="text" name="search" value="" id="search" /> 30 </form> 31 <table class="table table-striped text-nowrap"> 32 <tbody> 33 34 <script> 35 $(function () { 36 $.getJSON("https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/exec", function (ongakudata) { 37 for (var i in ongakudata) { 38 var table = '<tr class="border search-target">' 39 + '<td scope="row">' + ongakudata[i].pref_name + '</td>' 40 + '<td>' + ongakudata[i].song_title + '</td>' 41 + '<td>' + ongakudata[i].playing_type + '</td>' 42 + '<td>' + ongakudata[i].instrument_and_voice_timbre + '</td>' 43 + '<td>' + ongakudata[i].music_feature + '</td>' 44 + '<td>' + ongakudata[i].discovery_impression + '</td>' 45 + '<td>' + ongakudata[i].related_festival_and_event_what_month_where + '</td>' 46 + '<td>' + ongakudata[i].beginning_and_origin + '</td>' 47 + '<td>' + ongakudata[i].reference_url + '</td>' 48 + '<td>' + ongakudata[i].youtube_url + '</td></tr>' 49 $("tbody").append(table); 50 } 51 }); 52 }); 53 </script> 54 </tbody> 55 </table> 56 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 57 integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 58 crossorigin="anonymous"></script> 59 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 60 integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 61 crossorigin="anonymous"></script> 62<script src="https://raw.githubusercontent.com/DeuxHuitHuit/quicksearch/master/dist/jquery.quicksearch.min.js"></script> 63 64 65 <script> 66 $(function(){ 67 $('input#search').quicksearch('table tbody tr'); 68}); 69 </script> 70</body> 71 72</html>
あなたの回答
tips
プレビュー