jquery - 如何将标签添加到我的表单？

Question

我正在创建这样的“高级搜索”:

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

例如，在我插入的图片中，“tomate”并按“+”并添加标签，我插入“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在同一页上)在标签列表中作为标签。

实现方式:

• 你想什么时候追加它？ => 点击“加号”
• 你想附加什么？ => 成分名称(InputWord 输入的值)
• 你想把它附加到哪里？ => 在标签列表的末尾

如何在 jquery 中:

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

所以:

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

ps:同时考虑更改当前的输入类型:“type=email”。