Question

请在上一篇文章中找到答案。

在我的网站上，我有一个输入字段。我想使用它，我的页面上的用户可以“标记”其他用户的图像（类似于“人xy是在Facebook上的这个图片功能）。一旦该人开始输入，我想通过jQuery自动完成显示可能的值，并且一旦该人选择一个可能的值，我希望将所选值显示在标签中。（我说的是光学表示，例如，用灰色圆角矩形加下划线，就像在SO上一样）。

这是我的输入字段：

        <label for="tokenfield">Wer ist auf diesem Bild zu sehen?</label>
        <input type="text" class="form-control" id="tokenfield" value="example1, example2" />

Answer 1

这样的内容会在您输入时更改占位符：

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" />
    <script type="text/javascript" src="Bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.placeholderValue').on("keyup", function () {
                $('.targetPlaceholder').attr('placeholder', $('.placeholderValue').val());
            })
        });
    </script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="input-group">
                    <input type="text" class="placeholderValue form-control" />
                    <span class="input-group-addon" id="basic-addon1">@</span>
                    <input type="text" class="form-control targetPlaceholder" placeholder="Username" aria-describedby="basic-addon1" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Answer 2

几周前我问了上面的问题，但现在意识到，问题并不是那么好。经过几天的环顾四周，我找到了解决方案。我现在想让您了解我的解决方案，作为对发现此问题或遇到相同问题的其他人的参考或提示。

所以我现在正在使用这个库GitHub Tokenfield。

并像这样使用它：

        <label for="tokenfield">Wer ist auf diesem Bild zu sehen?</label>
        <input type="text" class="form-control" id="tokenfield" value="red,green,blue" />

初始化输入字段的基本JavaScript是：

$(document).ready(function () {
    $('#tokenfield').tokenfield();
})

但是，如果你想使用jQuery Autocomplete，你可以这样做：

$('#tokenfield').tokenfield({
    autocomplete: {
        source: ['red','blue','green','yellow','violet','brown','purple','black','white']
    },
    showAutocompleteOnFocus: true,
    limit: 1
});

输入字段被初始化为tokenfield，因此在输入数据并按Enter时，会产生令牌标记标记。初始化后，它显示3个标签，“红色”，“绿色”和“蓝色”，库从输入字段的“值”字段中获取。

我非常喜欢这个解决方案和库，因为它还提供了通过ajax绑定到jQuery Autocomplete的机制，这正是我想要和需要的。

我希望我能够帮助某人或节省一些时间。

令牌，标签，输入字段中的徽章

2 个答案: