Question

需要帮助..无法通过键盘上的向上和向下箭头键迭代自动建议这里是一些小代码片段

dojo.require("dojo.NodeList-manipulate");
dojo.require("dojo.NodeList-traverse");
dojo.ready(function () {
    var div = dojo.query("#list-of-items");
    console.log(dojo.byId("search").getBoundingClientRect());
    dojo.connect(dojo.byId("search"), "onkeyup", function (evt) {
        if (dojo.byId("search").value.trim() === "") {
            dojo.forEach(div.query("li"), function (elm, i) {
                dojo.style(elm, {
                    "display": "block"
                });
            });
            dojo.style(dojo.query("#list-of-items")[0], {
                "display": "none"
            });

            if(evt.keyCode == 40){
                return;               
            }else if(evt.keyCode == 38){
                return;
            }
        } else {
            dojo.style(dojo.query("#list-of-items")[0], {
                "display": "inline-block"
            });
        }
        searchTable(this.value, evt);
    });

    function searchTable(inputVal, e) {
        console.log(inputVal);
        var list = dojo.query('#list-of-items');
        dojo.forEach(list.query('li'), function (elm, i) {
            var found = false;
            var regExp = new RegExp(inputVal, 'i');
            if (regExp.test(elm.innerText)) {
                found = true;
                if(i===0){
                    dojo.attr(elm, { className: "hlight" });
                }
                dojo.style(elm, {
                    "display": "block"
                });
                return false;
            }
            if (found == true) {
                dojo.style(elm, {
                    "display": "block"
                });

            } else {
                dojo.style(elm, {
                    "display": "none"
                });
            }
        });
    }

});

并使用此css类突出显示自动建议

.hlight{
    background:#faae00;
    font-weight:bold;
    color:#fff;
}

请参阅 Fiddle here

感谢

Answer 1

最好的办法是保留一个包含突出显示值的索引，然后在每次按下向上/向下箭头时增加/减少该索引。

您还必须使用searchTable()函数发送该索引，以便将.hlight类添加到正确的元素中。

最困难的部分是当有人使用向上箭头时，当你已经在第一个元素上时（或当你在最后一个箭头时向下箭头），更正该索引。我通过向可见元素添加类.visible来解决这个问题（而不是仅添加display: block或display: none），这样您就可以轻松查询所有可见的项目。< / p>

我重写了一下你的代码，结果是this。但是，我的原始问题仍然存在，为什么不使用dijit/form/ComboBox或dijit/form/FilteringSelect？ Dojo已经有了为你做这个的小工具，你不必在这里重新发明轮子（因为它可能不会那么好）。

无法使用dojo中的向上和向下箭头键在自动完成中通过列表进行迭代

1 个答案: