This includes a sample code from a previous question "IndexedDB Fuzzy Search".
How can I bound the cursor result to a input box to create a auto-complete effect and fill multiple input boxes of a form with the different values from the objectStore when a result is chosen? I would like to do this without any libraries.
The HTML input boxes.
<input name="name" id="name"> //search by name, when a name is selected the last name and age are automatically attached to the other input boxes
<input name="lastname" id="lastname">
<input name="age" id="age">
The Javascript.
var result = [];
db.transaction(['table'], IDBTransaction.READ_ONLY)
.objectStore('table')
.openCursor(
IDBKeyRange.bound(searchTerm, searchTerm + '\uffff'),
IDBCursor.PREV)
.onsuccess = function (e) {
e || (e = event);
var cursor = e.target.result;
if (cursor) {
result.push([cursor.value.column1, cursor.value.sortcolumn]);
cursor.continue();
} else {
if (result.length) {
result.sort(function (a, b) {
return a[1] - b[2];
});
}
// Process code here
}
};
Fong-Wan Chau :
Well, in your case you might only want the first result that cursor return, so you just need to check is there a result returned, something like this:\n\n<input name=\"name\" id=\"name\">\n<input name=\"lastname\" id=\"lastname\">\n<input name=\"age\" id=\"age\">\n<script>\ndocument.getElementById('name').oninput = function () {\n var searchTerm = this.value;\n\n var result = [];\n db.transaction(['table'], IDBTransaction.READ_ONLY)\n .objectStore('table')\n .openCursor(\n IDBKeyRange.bound(searchTerm, searchTerm + '\\uffff'), // The important part\n IDBCursor.PREV)\n .onsuccess = function (e) {\n e || (e = event);\n var cursor = e.target.result;\n if (cursor) {\n // Here I assume that your table with 'lastname' and 'age'\n\n // Return result to \"lastname\" input\n document.getElementById('lastname').value = cursor.value.lastname;\n\n // Return result to \"age\" input\n document.getElementById('lastname').value = cursor.value.age;\n }\n };\n}\n</script>\n",
2012-10-06T23:34:31