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

$(".token-input-list-facebook").remove();

and add token input to the selector by

$("#demo-input-local").tokenInput([
                {id: 7, name: "Ruby"},
                {id: 41, name: "C"},
                {id: 43, name: "C++"},
                {id: 47, name: "Java"}
            ], {
      propertyToSearch: "name",
      theme: "facebook",
      preventDuplicates: true});
Unknown's avatar

Author: Abhilash

Hi, I’m Abhilash! A seasoned web developer with 15 years of experience specializing in Ruby and Ruby on Rails. Since 2010, I’ve built scalable, robust web applications and worked with frameworks like Angular, Sinatra, Laravel, Node.js, Vue and React. Passionate about clean, maintainable code and continuous learning, I share insights, tutorials, and experiences here. Let’s explore the ever-evolving world of web development together!

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

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

    Reply

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

    Reply

  6. @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.

    Reply

    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)

      Reply

      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.

  7. @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.

    Reply

Leave a comment