Search spreadsheet and get rows - google-apps-script

Question

I'm creating an app that can help find rows wich contains search query and show result in Ui. I have write this code, but something might be wrong and it don't works:
// Global variables
var sh = SpreadsheetApp.getActiveSheet();
var ss = SpreadsheetApp.getActiveSpreadsheet();
var lastrow = ss.getLastRow();
var lastcol = ss.getLastColumn();
// Menu additions
function onOpen() {
var menuEntries = [{name: 'search', functionName: 'ui'}];
ss.addMenu('Ui',menuEntries);
}
// UI
function ui() {
var app = UiApp.createApplication().setHeight('400').setWidth('900').setTitle('UI');
var panel = app.add(app.createHorizontalPanel());
var input = panel.createTextBox().setId('input').setFocus(true);
panel.add(input).add(printBtn).add(saveBtn).add(emailBtn);
var table = app.createFlexTable().setId('table').setBorderWidth(1).setCellPadding(1);
var handler = app.createServerHandler('search');
input.addChangeHandler(handler);
handler.addCallbackElement(table);
app.add(table);
ss.show(app);
}
function search(e) {
var app = UiApp.getActiveApplication();
var table = app.getElementById('table');
var query = e.toLowerCase();
var data = sh.getRange(2,1,lastrow,lastcol).getValues();
for (var row = 1; row < data.length; row++) {
for (var col = 0; col < data[row].length; col++) {
if(data[row][col].toString().toLowerCase().match(e.toString()) == e.toString() && e != '');
table.setText(row, col, data[row][col].toString());
}
}
return app;
}
Debugger says object e from function's search is undefined. Also I'm absolutely noob in js and simply don't know how to give this e parameter to function.
Thank you in advance.

Answer 1

e is an object with multiple properties, as for any js object you should tell what property of this object you want to read. In this code the value you want is the value of the textBox in which you enter a text value so there are 2 things you have to do :
give a name to this textBox ( .setName('input')) so that you can use this very same name as an object property in the form var inputValue = e.parameter.input
for this to work the textBox itself must also be part of the callbackElement of the handler. You used your table as callbackElement but the query textBox (input) is not a child of this table so you can either add the textBox to the table some way or, probably simpler in this case, add the textBox as a second callbackelement like this :
handler.addCallbackElement(table).addCallbackElement(input);
you could also have a look at this simple example that does approximately what you want.
edit : possible handler function
:
function search(e) {
var app = UiApp.getActiveApplication();
var table = app.getElementById('table');
var query = e.parameter.input.toLowerCase();
var tableRow = 0 ;
var data = sh.getRange(2,1,lastrow,lastcol).getValues();
for (var row = 1; row < data.length; row++) {
for (var col = 0; col < data[row].length; col++) {
if(data[row][col].toString().toLowerCase().match(query) == query && query!= ''){
for(c=0 ; c<data[row].length;++c){
table.setText(tableRow, c, data[row][c].toString());
}
++tableRow
continue;
}
}
}
return app;
}