0

这包括上一个问题“ IndexedDB Fuzzy Search ”中的示例代码。选择结果时，如何将光标结果绑定到输入框以创建自动完成效果并使用来自 objectStore 的不同值填充表单的多个输入框？我想在没有任何库的情况下做到这一点。

HTML 输入框。

 <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">

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

2 回答 2

1

好吧，在您的情况下，您可能只想要游标返回的第一个结果，因此您只需要检查是否有返回结果，如下所示：

<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>
于 2012-10-06T23:34:31.790 回答
1

好的，所以我知道在这里发布链接作为答案是不好的形式，但我在 HTML5Rocks 上写了一篇关于此的文章。我在这里剪切和粘贴太长了，但我认为这正是你想要的。http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/

于 2012-10-07T01:46:52.100 回答