Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typehead is not working with a Ajax requested data (tags). Unable to create new tags. #2321

Closed
sharuman opened this issue Apr 26, 2014 · 7 comments
Labels

Comments

@sharuman
Copy link

@sharuman sharuman commented Apr 26, 2014

Hi people. This is my first comment on this great project. Forgive me if I made any mistake :)
I successfully made a connection to my DB in order to load tags from it through an Ajax connection. Here is the code:

$("#e12").select2({
    //tags:[{id:0,text:'Apricot'},{id:1,text:'Banana'},{id:2,text:'Cherry'},{id:3,text:'Dates'},{id:4,text:'Grape'}],
    tags: true,
    maximumSelectionSize: 9,
    tokenSeparators: [",", " "],
    ajax: {
                url: "tags-populate.php",
                dataType: 'json',
                tags: function (term, page) {
                  return {
                    tags: term
                  };
          },
          results: function (data, page) {
            return { results: data };
          }
      }
});

The request (output) should be correct (see the image):
json encoding

Here is the HTML code:

<div class="list-group">
   <div class="list-group-box tags">
    <div class="title">Keywords</div><hr>
         <div id="e12" class="tags-input"></div>
    </div>
</div>

Now let's face the problems:

  1. When I start typing the typehead effect does not work: after typing "Acer" the tag "Acer" should be at the top of the dropdown list but it does not happen. "Acer" doesn't move from it's default "position" in the tags list. Hope this screenshot will help to understand what I'm trying to explain:
    tags-typehead
  2. I'm not able to insert new tags which are not in the drop.down list: "Note that when tagging is enabled the user can select from pre-existing tags or create a new tag by picking the first choice which is what the user has typed into the search box so far." I think this issue is related somehow with my first problem. The tokenSeparators are not working: if I try to force the inclusion of a new tag ending it with a comma (,) it's not recognized.

Thank you for your patience.

@sharuman sharuman changed the title Tags loader spinning infinitely and not loading all tags from Ajax request Typehead is not working with a Ajax requested data (tags). Unable to create new tags, Apr 26, 2014
@sharuman sharuman changed the title Typehead is not working with a Ajax requested data (tags). Unable to create new tags, Typehead is not working with a Ajax requested data (tags). Unable to create new tags. Apr 26, 2014
@kevin-brown
Copy link
Member

@kevin-brown kevin-brown commented Apr 29, 2014

When I start typing the typehead effect does not work: after typing "Acer" the tag "Acer" should be at the top of the dropdown list but it does not happen

Select2 assumes that remote data will be filtered on the remote server, so it does not do local filtering.

I'm not able to insert new tags which are not in the drop.down list

This is because what the user has already entered is one of your options. In that case, Select2 will not push the new tag to the top of the list.

@sharuman sharuman closed this Apr 29, 2014
@sharuman sharuman reopened this Apr 29, 2014
@sharuman
Copy link
Author

@sharuman sharuman commented Apr 29, 2014

Select2 assumes that remote data will be filtered on the remote server, so it does not do local filtering.

Is there a way to filter data on client-side?

This is because what the user has already entered is one of your options. In that case, Select2 will not push the new tag to the top of the list.

What if user want to add new data as is written in the documentation below?

Note that when tagging is enabled the user can select from pre-existing tags or create a new tag by picking the first choice which is what the user has typed into the search box so far.
@kevin-brown
Copy link
Member

@kevin-brown kevin-brown commented May 8, 2014

I'm sorry about the delayed response, I somehow missed this when doing my checks.

Is there a way to filter data on client-side?

You can filter on the client-side in the results option, but Select2 does not provide a way to natively do this.

What if user want to add new data as is written in the documentation below?

I believe Select2 matches on the id of the object returned by createSearchChoice, so you should be able to give it a different id and have the option appear. Keep in mind that this will display two options in a row, which may confuse the user.

To clarify what the documentation says:

Note that when tagging is enabled the user can select from pre-existing tags or create a new tag by picking the first choice which is what the user has typed into the search box so far

Select2 will consider a tag to be "old" if it has the same id as an option that already exists.

@sharuman
Copy link
Author

@sharuman sharuman commented May 9, 2014

Better later than never.

I really don't understand why the basic filtering function has not been implemented for server-side usage. It's impossible to specify all tags statically putting them one-by-one in an array like this:

tags:[{id:0,text:'Apricot'},{id:1,text:'Banana'},{id:2,text:'Cherry'},{id:3,text:'Dates'},{id:4,text:'Grape'},{...},.......,{...}],

What I'm trying to do is so "normal" and important that it should be done natively by the plugin. How can you even think to deal with a database of thousands and thousands (in constant growth) of tags with this plugin (with Ajax mode enabled) without filtering?

I believe Select2 matches on the id of the object returned by createSearchChoice, so you should be able to give it a different id and have the option appear. Keep in mind that this will display two options in a row, which may confuse the user.

The problem is that only tags which are pushed through my Ajax script are tokenized i.e the tokenSeparators don't work as I specified above.

@kevin-brown
Copy link
Member

@kevin-brown kevin-brown commented May 10, 2014

I really don't understand why the basic filtering function has not been implemented for server-side usage.

If you are pulling your data from a database that is queryable you most likely can filter the returned data.

What I'm trying to do is so "normal" and important that it should be done natively by the plugin.

While normally I would agree with you, you could think of it another way: rounding. Select2 is expecting that if it has the full data set (pre-loaded array or attached select element), it can safely filter ("round") the data set, because it won't need to worry about anything happening ahead of time. If something else is provided the data (a remote data source, in this case), Select2 cannot guarantee that the data hasn't already been filtered, especially in cases of paginated data, so it has to assume that the data is already pre-filtered.

How can you even think to deal with a database of thousands and thousands (in constant growth) of tags with this plugin (with Ajax mode enabled) without filtering?

It's quicker to filter through the database (before passing it to the client) than to let the client filter through it. You would hit a situation like we have in https://github.com/ivaynberg/select2/issues/781 very quickly.

The problem is that only tags which are pushed through my Ajax script are tokenized i.e the tokenSeparators don't work as I specified above.

I believe tags are controlled by the createSearchChoice function, so you may want to look into it for returning tags in a representation you are looking for.


As I said before, you can filter data on the client side, but you will need to build your own filtering function and apply it before returning from the results function.

@pgksunilkumar
Copy link

@pgksunilkumar pgksunilkumar commented Apr 13, 2017

please add a jsfiddle we can easily understand

@alexweissman
Copy link
Contributor

@alexweissman alexweissman commented Sep 25, 2017

Will link back to @kevin-brown's explanation in the documentation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.