Question

这包括上一个问题“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
    }
};

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

Answer 2

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

如何将indexedDB游标结果绑定到自动完成输入框

2 个答案: