How to remove the dropdown item matching the currently typed text using the jQuery Select2 plugin?

Question

I'm using the select2 jQuery plugin with an ajax call to populate the dropdown selection menu as the user types. My input is configured for tagging, so multiple selections are allowed and the user can enter their own tags, so the dropdown items are just suggestions.

The problem is that the whenever the user types, the first item in the dropdown list always matches what the user has typed. The items following that are the suggestions retrieved by ajax call.

It's not unreasonable that this happens since the currently typed text is actually a valid selection, but I don't want it in the dropdown list. I think it confuses the user into thinking that the first item in the list is a suggestion from the ajax call, and I don't want there to be any confusion about that.

Is it possible to remove that first item from the list (the users currently typed text), and if so, how?

My constructor options look like this:

myInput.select2({
    multiple: true,
    minimumInputLength: 3,
    ajax: {
        url: 'the-url',
        quietMillis: 1500,
        dataType: 'json',
        data: function(term, page) {
            return { 
                term: term.trim(),
                page: page,
                anotherParam: anotherInput.select2('val'),
            }
        },
        results: function(data, page, query) {
            // 'data' never includes the item I'm trying to remove
            // so it must be added at a later stage
            var results = [];
            for (var i=0; i<data.length; i++) {
                results.push( {id:data[i], text:data[i]} );
            }
            return {results: results};
        }
    },
    createSearchChoice: function (term) {
        term = term.trim();
        if ('' == term) {
            return null;
        }
        return { id: term.replace(',',''), text: term };
    }
});

Edit:

I know it might seem counter-intuitive, but I don't actually want to allow users to update the suggestion list with new options. I'm just using the input as a convenient way for the user to select (and de-select) multiple options. If there are matches in the (static) suggestion list (ajax) then I want to show them while also allowing the user to enter their own option.

My motivation for wanting to hide the first selection item is this: When I select one of the suggested items, this will trigger a callback that will populate another control with some corresponding data. Selecting a custom option (whatever the user has typed) should not produce any corresponding data in the other control. The other day I was typing something into the input, and there were 5 suggestions. I had forgotten that the first entry was simply echoing what I had typed, and mistook it for a suggestion that exactly matched what I had typed. When I selected it, there was no corresponding data to show in the other control.

I realized what was happening soon after, but if I was confused by it, a user could easily be too. I don't want that confusion. Removing the echoed text option would help with that.

Answer 1

The reason you are seeing the User's input is because you are using the CreateSearchChoice option, which allows for users to create their own tags via their input

if you want to remove that, remove the createSearchChoice

I currently use the createSearchChoice , but i append the text "(New Tag)" on the end so users can see the difference, see code below:

createSearchChoice: function (term, data) {
if ($(data).filter(function () {
            return this.text.localeCompare(term) === 0;
        }).length === 0) {
            // call $.post() to add this term to the server, receive back id
            // return {id:id, text:term}
            // or detect this shiftiness and do it below in the on-change
    return {
          id: -1+'/'+term,
          text: $.trim(term) + ' (new tag)'
    , isNew: true
        };  
},

Answer 2

In current version (Select2 4.1.0-beta.1), you just need to use createTag like this:

myInput.select2({
    ...,
    createTag: function (params) {
        return null;
    },
    ...
});