使用TextBox和onKeyUp和onKeyDown進行即時搜索

Question

我想要在您輸入文本框時立即搜索電子表格的Google Apps腳本web應用程序。

我現在使用的實現方法如下：對於每個鍵盤事件，新搜索與當前搜索字符串一起使用，我在onKeyUp調用的函數上使用延遲，如果調用onKeyDown，我嘗試殺死以前的函數調用，只是去與新的。這有效的工作，但搜索需要不同的時間來完成，所以最後一個完成並不是全是正確的。

我不知道如何解決這個任務在Google Apps腳本中，這可以使用類似的方式實現，但這些功能並不令人滿意：

var timer; 
function up(){ 
    setTimeout(mySpreadsheetSearchFunction, 500); 
} 
function down(){ 
    clearTimeout (timer); 
} 

這是一個不能正常工作目前執行的代碼：

function up(){ 
    var cache = CacheService.getPrivateCache(); 
    var now = parseInt(cache.get('iterate')); 
    Utilities.sleep(500); 
    if(parseInt(cache.get('iterate')) !== parseInt(now)){ 
    return; 
    }else{ 
    search(); 
    } 
    showInGui(); 
} 

function down(){ 
    var cache = CacheService.getPrivateCache(); 
    cache.put('iterate', 1+parseInt(cache.get('iterate'))); 
} 

的CacheService可能是錯誤的工具，這項工作，這可能是尤爲明顯？這是實施這樣的事情的正確方法嗎？

Answer 1

不知道，你必須使用緩存功能得到快速的結果......我做了這樣一個腳本，它工作得很好，我用所有的時間;-) 您可以測試它this test sheet

它的變種

這裏是如何工作的，腳本也許是很長，但只在處理器部分看（點擊）

在其他版本我讀了電子表格的功能之外，以便數據的排列成爲一個全局變量，主要是爲了限制電子表格調用的數量（它有時可能會在此版本中達到配額限制）

// G. Variables 
var sh = SpreadsheetApp.getActiveSheet(); 
var ss = SpreadsheetApp.getActiveSpreadsheet(); 
var lastrow = ss.getLastRow(); 
// ... 
function onOpen() { 
    var menuEntries = [ {name: "Search GUI", functionName: "searchUI"}, 
        ]; 
    ss.addMenu("Search Utilities",menuEntries);// custom menu 
} 
// Build a simple UI to enter search item and show results + activate result's row 
function searchUI() { 
    var app = UiApp.createApplication().setHeight(130).setWidth(400); 
    app.setTitle("Search by name/lastname/adress"); 
    var panel = app.createVerticalPanel(); 
    var txtBox = app.createTextBox().setFocus(true); 
    var label=app.createLabel(" Item to search for :") 
    panel.add(label); 
    txtBox.setId("item").setName("item"); 
    var label0=app.createLabel("Row").setWidth("40"); 
    var label1=app.createLabel("Name").setWidth("120"); 
    var label2=app.createLabel("Lastname").setWidth("120"); 
    var label3=app.createLabel("Street").setWidth("120"); 
    var hpanel = app.createHorizontalPanel(); 
    hpanel.add(label0).add(label1).add(label2).add(label3) 
// 
    var txt0=app.createTextBox().setId("lab0").setName("0").setWidth("40"); 
    var txt1=app.createTextBox().setId("lab1").setName("txt1").setWidth("120"); 
    var txt2=app.createTextBox().setId("lab2").setName("txt2").setWidth("120"); 
    var txt3=app.createTextBox().setId("lab3").setName("txt3").setWidth("120"); 
    var hpanel2 = app.createHorizontalPanel(); 
    hpanel2.add(txt0).add(txt1).add(txt2).add(txt3) 
    var hidden = app.createHidden().setName("hidden").setId("hidden"); 
    var subbtn = app.createButton("next ?").setId("next").setWidth("250"); 
    panel.add(txtBox); 
    panel.add(subbtn); 
    panel.add(hidden); 
    panel.add(hpanel); 
    panel.add(hpanel2); 
    var keyHandler = app.createServerHandler("click"); 
    txtBox.addKeyUpHandler(keyHandler) 
    keyHandler.addCallbackElement(panel); 
// 
    var submitHandler = app.createServerHandler("next"); 
    subbtn.addClickHandler(submitHandler); 
    submitHandler.addCallbackElement(panel); 
// 
    app.add(panel); 
    ss.show(app); 
    } 
// 
function click(e){ 
    var row=ss.getActiveRange().getRowIndex();    
    var app = UiApp.getActiveApplication(); 
    var txtBox = app.getElementById("item"); 
    var subbtn = app.getElementById("next").setText("next ?")  
    var txt0=app.getElementById("lab0").setText('--'); 
    var txt1=app.getElementById("lab1").setText('no match').setStyleAttribute("background", "white");// default value to start with 
    var txt2=app.getElementById("lab2").setText(''); 
    var txt3=app.getElementById("lab3").setText(''); 
    var item=e.parameter.item.toLowerCase(); // item to search for 
    var hidden=app.getElementById("hidden")     
    var data = sh.getRange(2,2,lastrow,3).getValues();// get the 3 columns of data 
     for(nn=0;nn<data.length;++nn){ ;// iterate trough 
    Logger.log(data[nn]) 
     if(data[nn].toString().toLowerCase().match(item.toString())==item.toString()&&item!=''){;// if a match is found in one of the 3 fields, break the loop and show results 
      txt0.setText(nn+2); 
      txt1.setText(data[nn][0]).setStyleAttribute("background", "cyan"); 
      txt2.setText(data[nn][1]); 
      txt3.setText(data[nn][2]); 
      sh.getRange(nn+2,2).activate(); 
      subbtn.setText("found '"+item+"' in row "+Number(nn+2)+", next ?"); 
      hidden.setValue(nn.toString())                     
      break 
      } 
     } 
return app ;// update UI 
} 
function next(e){ 
    var row=ss.getActiveRange().getRowIndex();    
    var app = UiApp.getActiveApplication(); 
    var txtBox = app.getElementById("item"); 
    var subbtn = app.getElementById("next").setText("no other match")  
    var hidden=app.getElementById("hidden");     
    var start=Number(e.parameter.hidden)+1;//returns the last search index stored in the UI 
    var item=e.parameter.item.toLowerCase(); // item to search for 
    var txt0=app.getElementById("lab0"); 
    var txt1=app.getElementById("lab1").setStyleAttribute("background", "yellow"); 
    var txt2=app.getElementById("lab2"); 
    var txt3=app.getElementById("lab3"); 
    var data = sh.getRange(2,2,lastrow,3).getValues();// get the 3 columns of data 
     for(nn=start;nn<data.length;++nn){ ;// iterate trough 
     if(data[nn].toString().toLowerCase().match(item.toString())==item.toString()&&item!=''){;// if a match is found in one of the 3 fields, break the loop and show results 
      txt0.setText(nn+2); 
      txt1.setText(data[nn][0]).setStyleAttribute("background", "cyan"); 
      txt2.setText(data[nn][1]); 
      txt3.setText(data[nn][2]); 
      sh.getRange(nn+2,2).activate(); 
      subbtn.setText("found '"+item+"' in row "+Number(nn+2)+", next ?");                        
      hidden.setValue(nn.toString())                     
      break 
      } 
     } 
return app ;// update UI 
} 

Answer 2

使用HtmlService，您可以改爲在純HTML和JavaScript中實現。這使您能夠加載電子表格數據一次，然後執行搜索客戶端，其中性能應該更好。