Google apps script 使用TextBox和onKeyUp和onKeyDown进行即时搜索
我想让谷歌应用程序脚本webapp搜索电子表格,当你在文本框中键入 实施一“我现在使用的是以下内容。对于每个向上键事件,将使用当前搜索字符串启动新搜索。我在onKeyUp调用的函数上使用delay,如果调用了onKeyDown,我会尝试终止前一个函数调用,只使用新函数。这有时是可行的,但是搜索需要不同的时间来完成,所以最后一个完成的搜索并不总是正确的 我不知道如何在谷歌应用程序脚本中解决这个任务。这可以使用类似的方法实现,但这些函数不可用:Google apps script 使用TextBox和onKeyUp和onKeyDown进行即时搜索,google-apps-script,Google Apps Script,我想让谷歌应用程序脚本webapp搜索电子表格,当你在文本框中键入 实施一“我现在使用的是以下内容。对于每个向上键事件,将使用当前搜索字符串启动新搜索。我在onKeyUp调用的函数上使用delay,如果调用了onKeyDown,我会尝试终止前一个函数调用,只使用新函数。这有时是可行的,但是搜索需要不同的时间来完成,所以最后一个完成的搜索并不总是正确的 我不知道如何在谷歌应用程序脚本中解决这个任务。这可以使用类似的方法实现,但这些函数不可用: var timer; function up(){
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可能是此作业的错误工具,有什么更好的方法?这是实现类似功能的正确方法吗?不确定是否必须使用缓存功能才能获得快速结果。。。我制作了这样一个脚本,效果非常好,我一直在使用它的变体;-) 你可以在电脑上测试 下面是它的工作原理,脚本可能相当长,但只查看处理程序部分(单击) 在另一个版本中,我在函数之外读取电子表格,因此数据数组成为一个全局变量,主要是为了限制电子表格调用的数量(在这个版本中,它有时会达到配额限制)
//G.变量
var sh=SpreadsheetApp.getActiveSheet();
var ss=SpreadsheetApp.getActiveSpreadsheet();
var lastrow=ss.getLastRow();
// ...
函数onOpen(){
var menuEntries=[{name:“搜索GUI”,functionName:“搜索UI”},
];
ss.addMenu(“搜索实用程序”,菜单);//自定义菜单
}
//构建一个简单的用户界面,输入搜索项目并显示结果+激活结果行
函数searchUI(){
var app=UiApp.createApplication().setHeight(130)、setWidth(400);
app.setTitle(“按姓名/姓氏/地址搜索”);
var panel=app.createVerticalPanel();
var txtBox=app.createTextBox().setFocus(true);
var label=app.createLabel(“要搜索的项目:”)
面板。添加(标签);
txtBox.setId(“项目”).setName(“项目”);
var label0=app.createLabel(“行”).setWidth(“40”);
var label1=app.createLabel(“名称”).setWidth(“120”);
var label2=app.createLabel(“Lastname”).setWidth(“120”);
var label3=app.createLabel(“街道”).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(“隐藏”).setId(“隐藏”);
var subbtn=app.createButton(“下一步”).setId(“下一步”).setWidth(“250”);
面板。添加(txtBox);
面板。添加(子BTN);
面板。添加(隐藏);
面板。添加(hpanel);
面板。添加(hpanel2);
var keyHandler=app.createServerHandler(“单击”);
addKeyUpHandler(keyHandler)
keyHandler.addCallbackElement(面板);
//
var submitHandler=app.createServerHandler(“下一步”);
subbtn.addClickHandler(submitHandler);
submitHandler.AddCallback元素(面板);
//
应用程序添加(面板);
ss.show(app);
}
//
功能点击(e){
var row=ss.getActiveRange().getRowIndex();
var app=UiApp.getActiveApplication();
var txtBox=app.getElementById(“项目”);
var subbtn=app.getElementById(“下一步”).setText(“下一步”)
var txt0=app.getElementById(“lab0”).setText('--');
var txt1=app.getElementById(“lab1”).setText(“不匹配”).setStyleAttribute(“背景”、“白色”);//开始时的默认值
var txt2=app.getElementById(“lab2”).setText(“”);
var txt3=app.getElementById(“lab3”).setText(“”);
var item=e.parameter.item.toLowerCase();//要搜索的项
var hidden=app.getElementById(“隐藏”)
var data=sh.getRange(2,2,lastrow,3).getValues();//获取3列数据
对于(nn=0;nn使用HtmlService,您可以用纯HTML和JavaScript实现这一点。这使您能够加载电子表格数据一次,然后在客户端进行搜索,性能应该会更好
// 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
}