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

ジャバスクリプト。

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 に答える