【问题标题】:How to add new tokens that are not already in the TokenInput如何添加尚未在 TokenInput 中的新令牌
【发布时间】:2014-12-24 05:47:11
【问题描述】:

我创建了一个输入类型的文本框,用户可以在自动完成的帮助下填写。

对于自动完成功能,我使用了一个从给定列表中获取输入的 jQuery 插件。 当我键入不在列表中的单词时,它不会显示任何结果并且不会创建标记。我还想为不在输入列表中的单词创建一个标记。

我的代码如下:

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="src/jquery.tokeninput.js"></script>

        <link rel="stylesheet" href="styles/token-input-facebook.css" type="text/css" />   
        <script type="text/javascript">
        $(document).ready(function() {
            $("input[type=button]").click(function () {
                alert("Would submit: " + $(this).siblings("input[type=text]").val());
            });
        });
        </script>
    </head>

    <body>
        <input type="text" id="demo-input-facebook-theme" name="blah2" />

        <script type="text/javascript">
        $(document).ready(function() {
            $("#demo-input-facebook-theme").tokenInput([
                {id: 7, name: "Ruby"},
                {id: 11, name: "Python"},
                {id: 13, name: "JavaScript"},
                {id: 17, name: "ActionScript"},
                {id: 19, name: "Scheme"},
                {id: 23, name: "Lisp"},
                {id: 29, name: "C#"},
                {id: 31, name: "Fortran"},
                {id: 37, name: "Visual Basic"},
                {id: 41, name: "C"},
                {id: 43, name: "C++"},
                {id: 47, name: "Java"}
            ], {
                theme: "facebook"
            });
        });
        </script>     
    </body>
</html>

【问题讨论】:

标签: jquery jquery-tokeninput


【解决方案1】:

您需要使用allowFreeTagging 选项。有关详细信息,请参阅this question。确保您已从 Github 下载了最新版本的插件,loopj.com 上托管的版本已过时,并且可能包含也可能不包含 allowFreeTagging 功能。

附加说明:该插件的最新版本似乎不适用于 1.5.1 之前的 jQuery 版本。

【讨论】:

  • 我应该在哪里添加 allowFreeTagging:true 在我的 Jquery 中?
  • 作为一个选项。将“主题:Facebook”替换为“主题:facebook,allowFreeTagging:true”
  • @vandy - 有趣。您使用的是相当旧的 jQuery 版本,该插件似乎无法使用。更新到最新的 jQuery 版本,似乎一切正常。我在这里为您设置了一个工作示例:jsfiddle.net/zsh5mwzx
  • 非常感谢 :) 还有一个问题是按空格键后有什么方法可以创建新令牌。在这种情况下,按 Enter 后会创建新令牌。
  • 查看 tokenDelimiter 选项!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-10-17
  • 2011-10-05
  • 1970-01-01
  • 2018-11-09
  • 2020-11-11
  • 2012-10-08
相关资源
最近更新 更多