使用easyAutocomplete插件：选中建议项时填充邮箱输入框

我帮你排查出了代码里的几个关键问题，咱们一步步来修正：

问题点分析 #

1. 字段名匹配错误：JSONPlaceholder返回的用户数据里，邮箱字段是email，不是你写的mail，这是最核心的问题！
2. 事件回调参数错误：onClickEvent里你传了选择器字符串给assignvalue，但这个函数需要的是选中的用户对象，插件其实已经把这个对象传给回调函数了。
3. 函数逻辑混乱：assignvalue里的变量赋值和取值都有问题，比如用了未定义的mail变量，还做了多余的赋值操作。
4. 无效代码：url函数里的console.log(element)写在return之后，永远不会执行，可以删掉。

修正后的完整代码 #

HTML部分

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js" type="text/javascript"></script>
    <style>
        .container {
            padding-top: 30px;
        }
        a {
            margin-top: 30px;
            display: block;
        }
        /************************************************************
            easy-autocomplete
        ************************************************************/
        .easy-autocomplete .easy-autocomplete-container ul {
            box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
        }
        .easy-autocomplete .easy-autocomplete-container ul .eac-category b,
        .easy-autocomplete .easy-autocomplete-container ul li b {
            color: #ff4000;
        }
    </style>
</head>
<body>
    <input id="example-ajax-post" />
    <input id="text-mail" />
</body>
</html>

JavaScript部分

function assignvalue(selectedUser) {
    // 直接将选中用户的email填充到目标输入框
    $("#text-mail").val(selectedUser.email);
}

var options = {
    url: function(phrase) {
        return "https://jsonplaceholder.typicode.com/users";
    },
    getValue: function(element) {
        // 返回用户名作为下拉显示的内容
        return element.name;
    },
    list: {
        maxNumberOfElements: 5,
        sort: {
            enabled: true
        },
        match: {
            enabled: true
        },
        showAnimation: {
            type: "fade",
            time: 400,
            callback: function() {}
        },
        hideAnimation: {
            type: "slide",
            time: 400,
            callback: function() {}
        },
        onClickEvent: function() {
            // 插件会自动把选中的元素对象传入getSelectedItemData()方法
            var selectedUser = $("#example-ajax-post").easyAutocomplete("getSelectedItemData");
            assignvalue(selectedUser);
        }
    },
    requestDelay: 1
};

$("#example-ajax-post").easyAutocomplete(options);

CSS部分（无需修改）

/************************************************************
    easy-autocomplete
************************************************************/
.easy-autocomplete .easy-autocomplete-container ul {
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
}
.easy-autocomplete .easy-autocomplete-container ul .eac-category b,
.easy-autocomplete .easy-autocomplete-container ul li b {
    color: #ff4000;
}

修改说明 #

• 把所有element.mail改成了element.email，匹配API返回的字段。
• 简化了assignvalue函数，直接接收选中的用户对象，填充邮箱到目标输入框。
• 在onClickEvent里用$("#example-ajax-post").easyAutocomplete("getSelectedItemData")获取选中的用户数据，这是easyAutocomplete提供的官方方法，能准确拿到选中项的完整对象。
• 删掉了无效的console.log代码，让逻辑更清晰。

改完之后，当你选中下拉列表里的任意用户名，对应的邮箱就会自动填充到#text-mail输入框里啦！

内容的提问来源于stack exchange，提问作者user3066595