如何使用jQuery Select2插件删除与当前键入的文本匹配的下拉项? [英] How to remove the dropdown item matching the currently typed text using the jQuery Select2 plugin?

问题描述

我正在使用带有ajax调用的select2 jQuery插件，以在用户键入时填充下拉选择菜单.我的输入已配置为标记，因此允许进行多个选择，并且用户可以输入自己的标记，因此下拉项仅是建议.

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.

问题在于，每当用户键入内容时，下拉列表中的第一项始终与用户键入的内容匹配.以下是通过ajax调用检索的建议.

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.

发生这种情况并非没有道理，因为当前键入的文本实际上是有效的选择，但是我不希望它出现在下拉列表中.我认为这会使用户感到困惑，因为它认为列表中的第一项是来自ajax调用的建议，我不希望对此感到困惑.

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 };
    }
});

我知道这似乎违反直觉，但是我实际上并不希望允许用户使用新选项来更新建议列表.我只是将输入用作用户选择(和取消选择)多个选项的便捷方式.如果(静态)建议列表(ajax)中有匹配项，那么我想显示它们，同时还允许用户输入自己的选项.

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.

我想要隐藏第一个选择项的动机是:当我选择一个建议的项时，这将触发一个回调，该回调将用一些相应的数据填充另一个控件.选择一个自定义选项(无论用户键入了什么)都不会在另一个控件中产生任何相应的数据.前几天，我在输入中输入了一些内容，有5条建议.我忘记了第一个条目只是在回显我输入的内容，而误以为是与我输入的内容完全匹配的建议.当我选择它时，没有相应的数据显示在另一个控件中.

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.

推荐答案

看到用户输入的原因是因为您使用的是CreateSearchChoice选项，该选项允许用户通过他们的输入创建自己的标签

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

如果要删除它，请删除createSearchChoice

if you want to remove that, remove the createSearchChoice

我目前使用createSearchChoice，但是我在末尾附加了文本(New Tag)"，以便用户可以看到不同之处，请参见下面的代码:

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
        };  
},

这篇关于如何使用jQuery Select2插件删除与当前键入的文本匹配的下拉项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！