Zend Dojo表单中的标记

Question

我想得到与这个stackoverflow表单中相同的标签。我的表单是zend-dojo表单，我在表单中创建标签的概念时遇到了问题。当用户输入值时，标签应该在输入框中自动完成，当it系统应该将单词之间有空格作为不同的值时。在这种情况下有人能帮我吗？

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>

您的小部件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");

我希望它能有所帮助。