Question

我想获得与此stackoverflow表单中相同的标记。我的表单是zend dojo表单，我在表单中创建标记的概念时遇到问题。当用户输入值时，标签应该在输入框中自动完成，当系统应该采用不同的值之间存在空格时。在这种情况下，任何人都可以帮助我吗？

Answer 1

我建议：

了解如何制作自己的小部件：http://dojotoolkit.org/reference-guide/quickstart/writingWidgets.html
在此Jquery示例中获取一些灵感：http://jcesar.artelogico.com/jquery-tagselector/
了解dijit.InlineEditBox：http://dojotoolkit.org/reference-guide/dijit/InlineEditBox.html
了解dijit.form.FilteringSelect：http://livedocs.dojotoolkit.org/dijit/form/FilteringSelect

之后，您可以自己创建小部件。您可以从这样的模板开始（有关如何定义窗口小部件模板，请参阅链接1）：

<div>
    <div class="${baseClass}" data-dojo-attach-point="containerNode"></div>
</div>

你的widget javascript代码看起来像这样（使用dojo 1.7）：

define("ps/Tag", 
["dojo/_base/declare", 
 "dijit/_WidgetBase", 
 "dijit/_WidgetsInTemplateMixin",
 "dijit/_TemplatedMixin",
 "dojo/text!ps/templates/Tag.html",
 "dijit/InlineEditBox",
 "dijit/form/FilteringSelect"
 ], function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, template, InlineEditBox, FilteringSelect) {

declare("ps.Tag", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {

    baseClass : "tag",

    templateString : template,

    store : null,

    searchAttr : null,

    value : null,

    postCreate : function() {
        var widget = this;
        eb = new InlineEditBox({
            editor: "dijit.form.FilteringSelect",
            editorParams : {
                store : widget.store,
                searchAttr: widget.searchAttr,
                value : widget.value
            },
            autoSave: true
        }, this.containerNode);
    }
});
return ps.Tag;

}）;

我将css留给你（你可以在链接2的例子中找到它并用firebug调整它。）

然后您可以在html中使用这样的小部件：

var stateStore = new Memory({
                    data: [
                        {name:"Alabama", id:"AL"},
                        {name:"Alaska", id:"AK"},
                        {name:"American Samoa", id:"AS"},
                        {name:"Arizona", id:"AZ"},
                        {name:"Arkansas", id:"AR"},
                        {name:"Armed Forces Europe", id:"AE"},
                        {name:"Armed Forces Pacific", id:"AP"},
                        {name:"Armed Forces the Americas", id:"AA"},
                        {name:"California", id:"CA"},
                        {name:"Colorado", id:"CO"},
                        {name:"Connecticut", id:"CT"},
                        {name:"Delaware", id:"DE"}
                    ]
                });
                var tag = new Tag({store : stateStore, searchAttr : "name", value : "CA"});
                dojo.place(tag.domNode, "yourTagContainerDivId", "last");

我希望它有所帮助。

Zend Dojo表单中的标签

1 个答案: