如何在表单中添加标签？

Question

我正在创建一个像这样的“高级搜索”：

我需要当我在“Ingredientes”字段中插入值并按下“+”按钮时，会添加一个标记。

例如，在我插入的图片中，“tomate”并按“+”并添加te标签，我插入“cebolla”并弹出“+”并添加标签。我如何用jQuery实现这个？

其实我的HTML是这样的：

<div id="Form1">
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="ejemplo_email_3" class="col-lg-2 control-label"> <a class="FontStyle">Palabras clave</a> </label>
            <div class="col-lg-10">
                <input type="email" class="form-control" id="InputWord" placeholder="sofrito">
            </div>
        </div>
    </form>


    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="ejemplo_email_3" class="col-lg-2 control-label"> <a class="FontStyle">Ingredientes</a> </label>
            <div class="col-lg-10">
                <input type="email" class="form-control" id="InputWord" placeholder="tomate, cebolla, zanahoria...">
            </div>
        </div>
    </form>
</div>

Answer 1

目标

概念是附加在InputWord中输入的成分（尝试使用更适合的id，以获得最佳的可读性和可维护性，例如“IngredientName”，并且不要使用多次相同的id在同一页面上）在标签列表中作为标签。

实现它的方法：

    
• 你想什么时候追加它？ =＆GT;在“加”点击
    
• 你想要追加什么？ =＆GT;成分名称（InputWord输入的值）
    
• 你想在哪里追加它？ =＆GT;在标签列表的末尾

如何在jquery：

• 什么时候？
    $("#myPlusButtonId").click(function(){})
• 什么？
    $("#InputWord ").val()
• 哪里？
    $("#tagsListParentDomId").append()

所以：

$("#myPlusButtonId").click(function(){
    $("#tagsListParentDomId").append($("#tagsListParentDomId").val())
})

ps：还要考虑更改当前的输入类型：“type = email”。