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

I'm Abhilash, a web developer who specializes in Ruby development. With years of experience working with various frameworks like Rails, Angular, Sinatra, Laravel, NodeJS, React and more, I am passionate about building robust and scalable web applications. Since 2010, I have been honing my skills and expertise in the Ruby on Rails platform. This blog is dedicated to sharing my knowledge and experience on topics related to Ruby, Ruby on Rails, and other subjects that I have worked with throughout my career. Join me on this journey to explore the exciting world of web development!

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 )

Facebook photo

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

Connecting to %s

%d bloggers like this: