Question

我的方案是我从数据库中带来autocomplete的一些值，V001/Vendor 1，V002/Vendor 2，.....

所以我想要的是如果用户已经在第一个文本框中选择了V001/Vendor 1，那么他就不能在第二个文本框中选择相同的V001/Vendor 2。这是它的样子

另外，请参阅我在jquery中的自动完成代码

autocompleteOptions = {
    minLength: 3,
    source: function (request, response) {
        var term = $.trim(request.term);
        $.ajax({
            //receives json array answer from the url
            url: AppConfig.PrefixURL + "App/GetVendorList",
            data: { "VENDORNAME": "" + extractLast(term) + "" },
            dataType: "json",
            type: "POST",
            success: function (data) {
                var datalist = JSON.parse(data);
                response($.map(datalist, function (element, index) {
                    return {
                        label: element.VENDORNAME,
                        value: element.VENDORCODE + "/" + element.VENDORNAME
                    };
                }));
            },
            error: function () {
                // added an error handler
                response($.ui.autocomplete.filter(
                    ["VENDORNAME", "VENDORCODE"]
                    , extractLast(term)));
            }
        });
    },
    select: function (e, u) {
        if (u.item.value == "") {
            return false;
        }
    },
    change: function (event, ui) {
        $(this).val((ui.item ? ui.item.value : ""));        
        if ($(this).val().trim() == "" || $(this).val() == null || $(this).val() == "null") {
            var name = $(this).attr('id');
            var id = parseInt(name.substr(13, name.length));
            $('#spFromDate' + id).val('');
            $('#spToDate' + id).val('');
        }
    },

};

$("#txtVendorName1").autocomplete(autocompleteOptions);

请建议如何实现这一目标。

Answer 1

您可以通过在第二次自动填充中删除之前选择的内容来实现您想要的效果。在返回自动完成功能之前，您可以在数据列表上使用filter。

首先，您使用each来推送已在数组alreadySelected中选择的所有元素。

var alreadySelecte = [];
....

$('[id^=txtVendorName]').each(function(){
   alreadySelected.push($(this).val());
})

使用此阵列，您可以过滤其他人自动完成

datalist = datalist.filter( item => !alreadySelected.includes(`${item.VENDORCODE}/${item.VENDORNAME}`))

因为这是您为每个自动填充输入设置的值value: element.VENDORCODE + "/" + element.VENDORNAME

Answer 2

如果textbox2与textbox1具有相同的值，则可以从autocomplete suggation中清除select选项上的第二个文本框值，这样用户就无法再次选择相同的选项。

尝试此类型代码：

$(document).on('change','#textbox2',function(){
   var value1=$('#textbox1').val();
   var value2=$('#textbox2').val();
   if(value2==value1){
    $('#textbox2').val("");
   }
});

过滤自动完成数据源

2 个答案: