Remove and reset jQuery token input drop down values through ajax

If you have a requirement for reloading the token input drop down values, you can remove the token input by


and add token input to the selector by

                {id: 7, name: "Ruby"},
                {id: 41, name: "C"},
                {id: 43, name: "C++"},
                {id: 47, name: "Java"}
            ], {
      propertyToSearch: "name",
      theme: "facebook",
      preventDuplicates: true});

Author: Abhilash

Hey! This is Abhilash - A Ruby developer for years, specialised on web development, working as a freelance Ruby Developer. I have experience in other frameworks such as Angular, Sinatra, Laravel etc. Mainly working on Ruby On Rails platform since 2010. This blog is about Ruby, Ruby On Rails and other subjects where I have had a chance to work on. You can contact me here: Abhilash AK

9 thoughts on “Remove and reset jQuery token input drop down values through ajax”

  1. You need to use $(“#demo-input-local1”).prev(“.token-input-list”).remove(); to remove the token and use it again

  2. I used facebook theme so that, I can use
    to remove items. For Other themes, the class named “token-input-list-facebook” may be does not exists.

  3. @akash I used this plugin 3 years ago. So now the plugin may be modified much and newer versions are available. I think thats why it is not working for you. If you are using facebook theme just do an inspect element in the token input and check where the values appended (in which class). And remove it or clear the content. If you are not using this theme then also you can try this way.

    1. Thanx for the reply. I had tried working on the above solution. It was partially working as i stated in my earlier comment.
      Now, its working for me in a differently because of below steps..
      1. I removed the dynamic content from (tags and static data)
      2. Enabled the static input in the above which was disabled by tokenInput
      3. Cleared the content in this input tag
      (This has retained to the original state)

      1. @akash The idea is when we are calling
        $(“#demo-input-local”).tokenInput() function , what token input does in the html page, we have to just reverse it and call this function again with the new inputs. We can check the difference by hitting the function in js console.

  4. @Abhi,
    The scenario is somewhat different here, as my input tag was calling a function which was initiating the ajax call & passed dynamic values to tokenInput() there itself. I wanted to reinitialize this text input without reloading the page. When i tried to reinitialized or redeclare tokeninput anywhere in ready function, it was initializing the content and the dynamic values were not accessible as it was initialized with no values. Simply removing the css classes didn’t work here rather it reomved the textbox.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s