Javascript 如何在multiselect中添加搜索功能？

我在一个页面中有两个多个选择选择城市&选择的城市，我可以来回传输选项。我提供了搜索功能来选择城市列表。一切都按我的需要运行

我还需要添加“选定城市”列表的搜索功能。有人能建议我怎么做吗。我试着用同样的代码来做，但没有成功。请提出解决办法。以下是演示：

html:

jquery：

$(function () {
    opts = $('#optlist option').map(function () {
        return [[this.value, $(this).text()]];
    });


    $('#someinput').keyup(function () {

        var rxp = new RegExp($('#someinput').val(), 'i');
        var optlist = $('#optlist').empty();
        opts.each(function () {
            if (rxp.test(this[1])) {
                optlist.append($('<option/>').attr('value', this[0]).text(this[1]));
            } else{
                optlist.append($('<option/>').attr('value', this[0]).text(this[1]).addClass("hidden"));
            }
        });
        $(".hidden").toggleOption(false);

    });
    $('.select-cities').click(function () {
        $('.select-cities option:selected').remove().appendTo('.chosen-cities');
        opts = $('#optlist option').map(function () {
            return [[this.value, $(this).text()]];
        });
    });

    $('.chosen-cities').click(function () {
        $('.chosen-cities option:selected').remove().appendTo('.select-cities');
        opts = $('#optlist option').map(function () {
            return [[this.value, $(this).text()]];
        });
    });


});

jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        if( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        if( jQuery( this ).parent( 'span.toggleOption' ).length == 0 )
            jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

---

对于可搜索的选择列表，有一个很棒的jQuery插件。它叫。你可能会发现它很有用

---

您似乎只为someinput编写了函数，而没有为someinput1编写函数。也许这就是问题所在

在这里，我更新了你的小提琴来解决这个问题。我所做的只是添加了someinput1的函数

$'someinput1'.keyup函数{

var rxp = new RegExp($('#someinput1').val(), 'i');
var optlist = $('#optlist1').empty();
opts1.each(function () {
    if (rxp.test(this[1])) {
        optlist.append($('<option/>').attr('value', this[0]).text(this[1]));
    } else{
        optlist.append($('<option/>').attr('value', this[0]).text(this[1]).addClass("hidden"));
    }
});
$(".hidden").toggleOption(false);

看一看

---

有一个很好的jQuery插件，用于搜索选择列表。它叫Selected。你可能会发现它很有用。@Ayushrestha:谢谢。它确实很有用，而且你似乎只为某些输入编写了函数，而没有为某些输入编写函数1。这可能就是问题所在。如果你发现我的评论有用，我会将其作为答案发布。这样其他人就会d也会从中受益。再见。@Aayusshrestha我试过这么做，但没用。如果我尝试在一个搜索框中键入内容，另一个框就会失去功能。我正在使用的keyup函数有问题。你知道吗？：即使我也这么做了。仍然有问题。当你在一个框中搜索，然后出海rch在另一个框中，搜索将无法正常运行。尝试这样做：在某个输入框中搜索，选择两个三个值，然后不按backspace键，移动到另一个搜索框，即someinput2，它将无法正常运行。我想我无法复制您的问题。因为我完全按照您所说的做了，并且工作非常顺利ne.两个搜索都正常工作。我在两个搜索框中来回跳转。没有退格。也尝试了退格。搜索在每种情况下都正常工作。我执行了以下步骤：1.首先，我在某个输入框中键入e，并选择了三个选项。2.值现在位于所选城市列表中。3.现在我尝试搜索第二个搜索框没有删除我在第一个搜索框中键入的内容。这是问题开始的地方。它不起作用。如果你有空，请试试这个。是的。我完全按照你刚才说的做了。它工作得很好。你确定你在检查我解决的小提琴吗？这里有一个链接。问题仍然存在。好吧，我想我不能正确地表达我的问题。谢谢你的时间。你帮了很多忙。

var rxp = new RegExp($('#someinput1').val(), 'i');
var optlist = $('#optlist1').empty();
opts1.each(function () {
    if (rxp.test(this[1])) {
        optlist.append($('<option/>').attr('value', this[0]).text(this[1]));
    } else{
        optlist.append($('<option/>').attr('value', this[0]).text(this[1]).addClass("hidden"));
    }
});
$(".hidden").toggleOption(false);

opts1 = $('#optlist1 option').map(function () {
        return [[this.value, $(this).text()]];
    });