dojo 二进制筛选

q9yhzks0  于 2022-12-16  发布在  Dojo
关注(0)|答案(2)|浏览(173)

我在我的页面上有多个过滤选择,除了第一个,其余的都被禁用。在第一个中选择一个值后,第二个过滤选择被启用,依此类推。我能够实现这一点。当用户在第一个过滤选择中选择一个值,然后按Tab键转到下一个过滤选择时,它被启用,但用户必须在第二个过滤选择上单击鼠标才能输入一个值。我有一个jsfidle链接

`http://jsfiddle.net/qpue91L9/75/`

这就说明了这个问题。我想要的是,只要用户从第一个filteringselect开始选项卡,下一个就应该被启用,并且不需要额外的点击,用户应该能够通过在fitleringselect文本框中键入来选择一个新值。

vh0rcniy

vh0rcniy1#

我想我已经搞定了[工作小提琴][1]

[1]: http://jsfiddle.net/qpue91L9/125/

同样如建议的那样,提供完整的工作代码
HTML代码

<input id="stateSelect">
<input id="stateSelect1">
<input id="stateSelect2">

JS代码

require([
        "dojo/store/Memory", "dojo/on","dijit/form/FilteringSelect", "dojo/domReady!",'dijit/registry',"dijit/focus","dojo/dom"
    ], function(Memory, on,FilteringSelect,ready,registry,focusUtil,dom){
        var stateStore = new Memory({
            data: [
                {name:"Alabama", id:"AL", timeStamp:"1211753600"},
                {name:"Alaska", id:"AK", timeStamp:"1211753601"},
                {name:"American Samoa", id:"AS", timeStamp:"1211753602"},
                {name:"Arizona", id:"AZ", timeStamp:"1211753603"},
                {name:"Arkansas", id:"AR", timeStamp:"1211753604"},
                {name:"Armed Forces Europe", id:"AE", timeStamp:"1211753605"},
                {name:"Armed Forces Pacific", id:"AP", timeStamp:"1211753606"},
                {name:"Armed Forces the Americas", id:"AA", timeStamp:"1211753607"},
                {name:"California", id:"CA", timeStamp:"1211753608"},
                {name:"Colorado", id:"CO", timeStamp:"1211753609"},
                {name:"Connecticut", id:"CT", timeStamp:"1211753610"},
                {name:"Delaware", id:"DE", timeStamp:"1211753611"}
            ], idProperty: "timeStamp"
        });

        var filteringSelect = new FilteringSelect({
            id: "stateSelect",
            store: stateStore,
             tabIndex: 1,
            searchAttr: "name",
            identifier: "timeStamp",

        }, "stateSelect").startup();
        var filteringSelect1 = new FilteringSelect({
            id: "stateSelect1",
            name: "state",
             tabIndex: 2,
            store: stateStore,
            searchAttr: "name",
            identifier: "timeStamp" ,
            disabled:true,
        }, "stateSelect1").startup();
        var filteringSelect2 = new FilteringSelect({
            id: "stateSelect2",
            name: "state",
             tabIndex: 3,
            store: stateStore,
            searchAttr: "name",
            identifier: "timeStamp",
            disabled:true,        
        }, "stateSelect2").startup();

        on(dijit.byId("stateSelect"),"KeyPress",function(evt){
        dijit.byId("stateSelect1").set("disabled",false);

        });
         on(dijit.byId("stateSelect"),"change",function(evt){
        dijit.byId("stateSelect1").set("disabled",false);
         dijit.byId("stateSelect1").focus();

        });
        on(dijit.byId("stateSelect1"),"KeyPress",function(evt){
        dijit.byId("stateSelect2").set("disabled",false);

        });
         on(dijit.byId("stateSelect1"),"change",function(evt){
        dijit.byId("stateSelect2").set("disabled",false);
         dijit.byId("stateSelect2").focus();

        });

    });
lsmd5eda

lsmd5eda2#

我检查了你的例子,让它工作得有点....
Update Example
基本上,我加了这个:

require([ "dijit/focus", "dojo/dom", "dojo/domReady!" ], function(focusUtil, dom){
    var domObj = dom.byId("stateSelect1");
    focusUtil.focus(domObj);
});

并且还为每个select对象添加了tabIndex属性。问题是只有当你点击列表中的一个项目时它才起作用。如果使用了tab,它就不起作用了。你可能会使用这个例子并捕获tab事件,使它也按照你想要的方式工作。

相关问题