1

I have created a input type textbox which user can fill-in with the help of autocompletion.

For the autocomplete functionality, I have used a jQuery plugin that takes input from a given list. When I type a word which is not in the list, it shows no results and doesn't create a token. I want to also create a token for a word that is not in input list.

My code is below:

<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>
rtruszk
  • 3,902
  • 13
  • 36
  • 53
vandy
  • 305
  • 2
  • 12

1 Answers1

0

You need to make use of the allowFreeTagging option. See this question for more details. Make sure you've downloaded the latest version of the plugin from Github, the version hosted on loopj.com is outdated, and may or may not include the allowFreeTagging functionality.

Additional note: The latest version of the plugin doesn't appear to function with jQuery versions as old as 1.5.1.

Community
  • 1
  • 1
Chris
  • 5,882
  • 2
  • 32
  • 57
  • where should i add allowFreeTagging:true in my Jquery ? – vandy Dec 29 '14 at 07:11
  • As an option. Replace "theme:Facebook" with "theme:facebook,allowFreeTagging:true" – Chris Dec 29 '14 at 12:04
  • @vandy - Intersting. You're using a fairly old version of jQuery, which the plugin doesn't seem to work with. Update to the latest jQuery version, and things seem to work. I've set up a working example for you here: http://jsfiddle.net/zsh5mwzx/ – Chris Dec 30 '14 at 15:43
  • thanks a lot :) one more question is there any way to create new tokens after pressing spacebar.In this case new token is created after pressing enter. – vandy Dec 31 '14 at 08:24
  • Check out the tokenDelimiter option! – Chris Dec 31 '14 at 09:39