内線表検索ガジェット

naisengadget.xml

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="内線検索" height="400"/> 
  <UserPref name="key" display_name="Spreadsheetのキー" default_value="" datatype="string"/>
   <Content type="html"><![CDATA[
<!-- libs -->
<script src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- jquery.quicksearch.js minified -->
<script>
(function($,window,document,undefined){$.fn.quicksearch=function(target,opt){var timeout,cache,rowcache,jq_results,val="",e=this,options=$.extend({delay:100,selector:null,stripeRows:null,loader:null,noResults:"",bind:"keyup",onBefore:function(){return},onAfter:function(){return},show:function(){this.style.display=""},hide:function(){this.style.display="none"},prepareQuery:function(val){return val.toLowerCase().split(" ")},testQuery:function(query,txt,_row){for(var i=0;i<query.length;i+=1){if(txt.indexOf(query[i])===-1){return false}}return true}},opt);this.go=function(){var i=0,noresults=true,query=options.prepareQuery(val),val_empty=val.replace(" ","").length===0;for(var i=0,len=rowcache.length;i<len;i++){if(val_empty||options.testQuery(query,cache[i],rowcache[i])){options.show.apply(rowcache[i]);noresults=false}else{options.hide.apply(rowcache[i])}}if(noresults){this.results(false)}else{this.results(true);this.stripe()}this.loader(false);options.onAfter();return this};this.stripe=function(){if(typeof options.stripeRows==="object"&&options.stripeRows!==null){var joined=options.stripeRows.join(" ");var stripeRows_length=options.stripeRows.length;jq_results.not(":hidden").each(function(i){$(this).removeClass(joined).addClass(options.stripeRows[i%stripeRows_length])})}return this};this.strip_html=function(input){var output=input.replace(new RegExp("<[^<]+>","g"),"");output=$.trim(output.toLowerCase());return output};this.results=function(bool){if(typeof options.noResults==="string"&&options.noResults!==""){if(bool){$(options.noResults).hide()}else{$(options.noResults).show()}}return this};this.loader=function(bool){if(typeof options.loader==="string"&&options.loader!==""){bool?$(options.loader).show():$(options.loader).hide()}return this};this.cache=function(){jq_results=$(target);if(typeof options.noResults==="string"&&options.noResults!==""){jq_results=jq_results.not(options.noResults)}var t=typeof options.selector==="string"?jq_results.find(options.selector):$(target).not(options.noResults);cache=t.map(function(){return e.strip_html(this.innerHTML)});rowcache=jq_results.map(function(){return this});return this.go()};this.trigger=function(){this.loader(true);options.onBefore();window.clearTimeout(timeout);timeout=window.setTimeout(function(){e.go()},options.delay);return this};this.cache();this.results(true);this.stripe();this.loader(false);return this.each(function(){$(this).bind(options.bind,function(){val=$(this).val();e.trigger()})})}})(jQuery,this,document);
</script>
<!-- main -->

<script>
var prefs = new gadgets.Prefs();
// 設定からスプレッドシートのキーを取得する
var key = prefs.getString("key");

google.load("visualization", "1");
google.setOnLoadCallback(init)
function init() {
    var query = new google.visualization.Query(
      "https://spreadsheets.google.com/a/photocreate.co.jp/tq?key=" + key + "&gid=0");
    query.setQuery("select A,C,D,E,F");
    query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
    var data = response.getDataTable();
　　console.log(data);
    if (data === null) {
        $('#result').append("<p>まだデータが読み込めていません。もう一度押してください</p>");
    }

    // 一行ずつループ処理
    for (var row = 0; row < data.getNumberOfRows(); row++) {
        $('#result').append("<li>"
            + "<span style='display:none'>" + data.getFormattedValue(row, 0) + "</span>"
            + data.getFormattedValue(row, 1)
            + "<span class=\"option\">["
            + data.getFormattedValue(row, 3)
            + "]</span>"
            + ":"
            + "<strong>" + data.getFormattedValue(row, 4) + "</strong> "
            + "</li>"
        );
    }

    // quicksearch
    qs = $('input#searchtext').quicksearch('ul#result li');
}
</script>
<!-- input form -->
<input type="text" size="10" name="name" id="searchtext" placeholder="例) 吉田" />
<ul id="result"/>
<script src="https://embed.small.chat/TAA47MC3CGB1K7B0FL.js" async></script>

   ]]>  
  </Content>
</Module>

とりあえず旧サイト用に動くようにしたけどこの仕様はいずれDeprecatedになるでしょうね・・・。