过滤自动完成数据源

Posted 2021-05-02

我的情况是我从数据库带来一些值为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);

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

答案

您可以通过在第二个自动完成中删除之前选择的内容来实现您想要的效果。在返回自动完成之前，您可以在datalist上使用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您为每个自动完成输入设置

另一答案

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

试试这个类型代码：

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