如何添加TokenInput中尚未包含的新标记

时间:2014-12-24 05:47:11

标签: jquery jquery-tokeninput

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

对于自动完成功能,我使用了一个从给定列表中获取输入的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>

1 个答案:

答案 0 :(得分:0)

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

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