How to get indexedDb query results outside of its callback

Question

I have a form with an input field that I want to autocomplete with values ​​from an IndexedDb objectStore object, this works with two input fields located above them. I work fine with a simple array, but want it to work with the values ​​of the objectStore. To do this, I have to infer the values ​​from the transaction so that I can scroll through them in the autocomplete function.

1- How can I get results from a transaction into an object accessible in the rest of the code?

2- Is my loop syntax ok "results.value.name.length" (name is my objectStore index) to work with the resulting object?

Getting IndexedDb objects via cursor:

var results = []; var openDbRequest = indexedDB.open(DB_NAME); openDbRequest.onsuccess = function (e) { var db = e.target.result; var tran2 = db.transaction("store"); tran2.objectStore("store").openCursor().onsuccess = function(e) { var cursor = e.target.result; if (cursor) { results = cursor; cursor.continue(); }; }; }; 

Autocomplete function

 var auto = ""; var auto_disp = ""; function getName(results) { var input = document.forms['myform'].name.value; var len = input.length; if (input.length) { for (i=0; i<results.value.name.length; i++){ if (results.value.name[i].substr(0,len).toLowerCase() == input.toLowerCase()){ auto_disp = input + results.value.name[i].substr(len); auto = results.value.name[i]; break; } } } document.forms['myform'].auto_name.value = auto_disp; } function setName() { document.forms['myform'].name.value = auto; hideAuto(); } function hideAuto() { document.forms['myform'].auto_name.value = ""; } 

HTML form:

 <div style="position: absolute; top: 0; left: 0; width: 200px; z-index: 1;"> <input type="text" name="name" style="background-color: #fff; border: 1px solid #999; width: 200px; padding: 2px" disabled /> </div> <div style="position: absolute; top: 0; left: 0; width: 200px; z-index: 2;"> <input autocomplete="off" type="text" name="auto_name" style="background: none; color:#39f; border: 1px solid #999; width: 200px; padding: 2px" onfocus="getName()"onkeyup="getName()" onkeydown="if (event.keyCode == 13) {setName();};"/> </div> 

UPDATE: I tried another chain, now I get the cursor, but something is wrong in the loop, I do not get auto-complete.

 openDbRequest.onsuccess = function (e) { var db = e.target.result; var tran2 = db.transaction("store"); tran2.objectStore("store").openCursor().onsuccess = function(e) { var cursor = e.target.result; if (cursor) { var input = document.forms['myform'].country.value; //the inputted value var len = input.length; if (input.length) { for (i=0; i<cursor.length; i++){ if (cursor.value.nome[i].substr(0,len).toLowerCase() == input.toLowerCase()){ auto_disp = input + cursor.value.nome[i].substr(len); auto = cursor.value.nome[i]; break; } } } document.forms['myform'].auto_name.value = auto_disp; cursor.continue(); } }; }; 

Answer 1

If you want to use it outside the scope of the transaction, just add it to the variable

 var results = []; var openDbRequest = indexedDB.open(DB_NAME); openDbRequest.onsuccess = function (e) { var db = e.target.result; var tran2 = db.transaction("store"); tran2.objectStore("store").openCursor().onsuccess = function(e) { var cursor = e.target.result; if (cursor) { results.push(cursor.value) cursor.continue(); }; }; }; 

After that, you move the iteration over the result object, and the transaction area will be closed after receiving all the data.