我有一个带有输入框的表单,我想使用 IndexedDb objectStore 中的值自动完成,这适用于两个过度定位的输入框。我对一个简单的数组工作得很好,但我想让它与来自 objectStore 的值一起工作。为此,我必须将可用的值从事务中取出,以便我可以在自动完成功能中循环它们。
1-如何将事务中的结果转换为其余代码中可用的对象?
2- 我的循环语法是否可以“results.value.name.length”(名称是我的 objectStore 索引)与结果对象一起使用?
通过游标获取 IndexedDb 对象:
var results = [];
var openDbRequest = indexedDB.open(DB_NAME);
openDbRequest.onsuccess = function (e) {
var db = e.target.result;
var tran2 = db.transaction("store");
tran2.objectStore("store").openCursor().onsuccess = function(e) {
var cursor = e.target.result;
if (cursor) {
results = cursor;
cursor.continue();
};
};
};
自动完成功能
var auto = "";
var auto_disp = "";
function getName(results) {
var input = document.forms['myform'].name.value;
var len = input.length;
if (input.length) {
for (i=0; i<results.value.name.length; i++){
if (results.value.name[i].substr(0,len).toLowerCase() == input.toLowerCase()){
auto_disp = input + results.value.name[i].substr(len);
auto = results.value.name[i];
break;
}
}
}
document.forms['myform'].auto_name.value = auto_disp;
}
function setName() {
document.forms['myform'].name.value = auto;
hideAuto();
}
function hideAuto() {
document.forms['myform'].auto_name.value = "";
}
HTML 表单:
<div style="position: absolute; top: 0; left: 0; width: 200px; z-index: 1;">
<input type="text" name="name" style="background-color: #fff; border: 1px solid #999; width: 200px; padding: 2px" disabled />
</div>
<div style="position: absolute; top: 0; left: 0; width: 200px; z-index: 2;">
<input autocomplete="off" type="text" name="auto_name" style="background: none; color:#39f; border: 1px solid #999; width: 200px; padding: 2px" onfocus="getName()"onkeyup="getName()" onkeydown="if (event.keyCode == 13) {setName();};"/>
</div>
更新:尝试了不同的链接,现在我得到了光标,但循环有问题,我没有得到自动完成。
openDbRequest.onsuccess = function (e) {
var db = e.target.result;
var tran2 = db.transaction("store");
tran2.objectStore("store").openCursor().onsuccess = function(e) {
var cursor = e.target.result;
if (cursor) {
var input = document.forms['myform'].country.value; //the inputted value
var len = input.length;
if (input.length) {
for (i=0; i<cursor.length; i++){
if (cursor.value.nome[i].substr(0,len).toLowerCase() == input.toLowerCase()){
auto_disp = input + cursor.value.nome[i].substr(len);
auto = cursor.value.nome[i];
break;
}
}
}
document.forms['myform'].auto_name.value = auto_disp;
cursor.continue();
}
};
};