jQuery UI自动完成方法无法过滤数据？

Question

jQuery自动完成功能未从JSON值过滤，请在此处查看演示。

https://codepen.io/jprakashrpm/pen/bZLBow

JSON电子邮件字段未过滤，仅过滤标签值。

$(function() {

    var projects = [
        {
            label: "jayaprakash",
            email: "jayaprakash.janarthanan@gmail.com",
        },
        {
            label: "karthi",
            email: "karthi.murugan@yahoo.co.in",
        },
        {
            label: "deepak",
            email: "deepak.chandra@outlook.co.in",
        }
    ];

    $( "#name" ).autocomplete({
        source: projects,
        focus: function( event, ui ) {
            $( "#name" ).val( ui.item.label );
            return false;
        },
        select: function( event, ui ) {
            $( "#email" ).val( ui.item.email );
            return false;
        }
    })


    $( "#email" ).autocomplete({
        source: projects,
        focus: function( event, ui ) {
            $( "#email" ).val( ui.item.email );
            return false;
        },
        select: function( event, ui ) {
            $( "#name" ).val( ui.item.label );
            return false;
        }
    })



});

Answer 1

请使用以下代码

$(function () {

var projects = [
    {
        label: "jayaprakash",
        email: "jayaprakash.janarthanan@gmail.com",
    },
    {
        label: "karthi",
        email: "karthi.murugan@yahoo.co.in",
    },
    {
        label: "deepak",
        email: "deepak.chandra@outlook.co.in",
    }
];

$("#name").autocomplete({
    source: projects,
    focus: function (event, ui) {
        $("#name").val(ui.item.label);
        return false;
    },
    select: function (event, ui) {
        alert(1);
        console.log(ui.item);
        $("#email").val(ui.item.email);
        return false;
    },
    search: function (oEvent, oUi) {
        // get current input value
        var sValue = $(oEvent.target).val();
        let label = [];
        let data = projects.map((value, number) => {
            if (value.label.includes(sValue)) {
                label.push(value.label)
            }
        })
        $(this).autocomplete('option', 'source', label);
    }

})


$("#email").autocomplete({
    source: projects,
    focus: function (event, ui) {
        $("#email").val(ui.item.email);
        return false;
    },
    select: function (event, ui) {
        $("#name").val(ui.item.label);
        return false;
    },
    search: function (oEvent, oUi) {
        var sValue = $(oEvent.target).val();
        let email = [];
        let data = projects.map((value, number) => {
            if (value.email.includes(sValue)) {
                email.push(value.email)
            }
        })
        $(this).autocomplete('option', 'source', email);
    }

})



});