How to bind an indexedDB cursor result to a autocomplete input box

Question

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
    }
};

You have to async callback pattern. – Kyaw Tun Oct 04 '12 at 23:45 — Kyaw Tun, Oct 04 '12 at 23:45

score 1 · Accepted Answer · answered Oct 06 '12 at 23:34

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:

<input name="name" id="name">
<input name="lastname" id="lastname">
<input name="age" id="age">
<script>
document.getElementById('name').oninput = function () {
  var searchTerm = this.value;

  var result = [];
  db.transaction(['table'], IDBTransaction.READ_ONLY)
    .objectStore('table')
    .openCursor(
      IDBKeyRange.bound(searchTerm, searchTerm + '\uffff'), // The important part
      IDBCursor.PREV)
    .onsuccess = function (e) {
      e || (e = event);
      var cursor = e.target.result;
      if (cursor) {
        // Here I assume that your table with 'lastname' and 'age'

        // Return result to "lastname" input
        document.getElementById('lastname').value = cursor.value.lastname;

        // Return result to "age" input
        document.getElementById('lastname').value = cursor.value.age;
      }
    };
}
</script>

Thanks Fong-Wan Chau, this in fact binds results to the input boxes but it doesn't give an auto-complete effect. I've been working on that but I've encountered some other [problem](http://stackoverflow.com/questions/12785350/how-can-i-get-the-result-of-a-indexeddb-cursor-objects-out-of-the-scope-of-the-t), can you give me a hand? Thanks! — Ruben Teixeira, Oct 08 '12 at 16:15
By "autocomplete effect" you mean something like the Google autosuggest? — Fong-Wan Chau, Oct 12 '12 at 23:32
Yes, a inline 'inbox' autosuggest function. found this short an effective [snippet](http://www.javascriptsource.com/forms/auto-complete-textfield.html) — Ruben Teixeira, Oct 13 '12 at 09:14

score 1 · Answer 2 · answered Oct 07 '12 at 01:46

1

Ok, so I know it's bad form to post links here as answers, but I did an article on this at HTML5Rocks. It's too long for me to cut and paste in here, but I think it's exactly what you want. http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/

answered Oct 07 '12 at 01:46

Raymond Camden

10,661
3
34
68

Thanks Raymond, but in fact I got to Fong-Wan Chau question through your blog and your link there :) I would like to avoid any plugins/libraries for this. I've been working in some code for this, now I've got another [issue](http://stackoverflow.com/questions/12785350/how-can-i-get-the-result-of-a-indexeddb-cursor-objects-out-of-the-scope-of-the-t), could you give me a hand? Thanks! – Ruben Teixeira Oct 08 '12 at 16:11
1

Looks like I was too late. ;) – Raymond Camden Oct 10 '12 at 10:50
Well, thanks anyway, I'll keep reading your blog for some good tips, cheers. – Ruben Teixeira Oct 10 '12 at 11:43

How to bind an indexedDB cursor result to a autocomplete input box

2 Answers2