javascript - Global variable unavailable within function? -

i'm working on reproducing live filter box handsontable based on built in search functionality @ http://docs.handsontable.com/0.15.0-beta6/demo-search-for-values.html.

right i'm working simplest use case (http://jsfiddle.net/kc11/ul3l4tel/) docs.

as explained in docs, in code if enter search string, matching cells outputted console using following function:

         handsontable.dom.addevent(searchfiled, 'keyup', function (event) {                 var queryresult = hot.search.query(this.value);                  console.log(queryresult);                 hot.render(); 

i want grab rows in data array match search string , filter original data 'data' search string before redisplaying table. partially works using:

 handsontable.dom.addevent(searchfiled, 'keyup', function (event) {     var queryresult = hot.search.query(this.value);      console.log(queryresult);     rows = getrowsfromobjects(queryresult);     console.log('hot', hot.getdata());     console.log('data', data);     var data = hot.getdata();     var filtered = data.filter(function(d, ix) { return rows.indexof(ix) >= 0; });     console.log('filtered', filtered);      hot.loaddata(filtered);   }); 

as can see in http://jsfiddle.net/ul3l4tel/2/ , need replace

var data = hot.getdata(); 

(a handsontable function gets current data in table) global 'data' (defined @ top) searching work. global data undefined in function. how can fix this?

if "global" data variable referring "at top" one

var data = [   ['nissan', 2012, 'black', 'black'],   ['nissan', 2013, 'blue', 'blue'],   ['chrysler', 2014, 'yellow', 'black'],   ['volvo', 2015, 'yellow', 'gray'] ] 

then not global. variable local domcontentloaded event handler function. presume though declare other event handlers within same block, being called different scope, making variable unavailable. suggested in comment, can assign global variable window, or declare in global scope.