Mention.js加载数据库用户后推荐列表不关闭、输入内容丢失问题求助

问题原因 #

两个异常均由用户数据不符合Mention.js的必填校验规则、触发组件内部逻辑异常导致：

• 后端返回的image字段为空格，Mention.js依赖该字段完成选中后的逻辑收尾，空值会导致选中后无法触发下拉列表关闭的回调
• 字段校验失败后，组件内部的内容标记逻辑出错，回车触发内容重绘时，会把无法识别的非标记内容直接清空
• 若你使用的Bootstrap版本高于2.x，自带的typeahead组件API与Mention.js兼容版本不匹配，也会触发上述异常

修复步骤 #

1. 修正后端返回数据 #

确保name、username、image三个必填字段非空，image可使用1px透明GIF的base64作为占位，无需额外引入资源：

header('Content-Type: application/json');
$con = new PDO("sqlite:database.db");
$user_data = array();

$users = $con->query("select * from users");

foreach($users as $key => $val)
{
    $user_data[$key]['name'] = $val['f_name'];
    $user_data[$key]['username'] = $val['name'];
    // 替换空值为base64格式透明占位图
    $user_data[$key]['image'] = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
}

echo json_encode($user_data);

2. 优化前端初始化逻辑 #

初始化前增加数据校验，同时可手动添加选中回调强制关闭下拉框，兜底处理异常场景：

$(document).ready(function(){
    $.getJSON('fetch.php', function(data) {
        // 校验返回数据格式是否合法
        if(!Array.isArray(data)) {
            console.error('用户数据格式错误');
            return;
        }
        data.forEach(item => {
            if(!item.name || !item.username || !item.image) {
                console.error('用户字段缺失', item);
            }
        });
        $("#textarea").mention({
            users: data,
            // 手动添加选中回调，强制隐藏下拉列表
            onSelect: function() {
                $(".typeahead").hide();
            }
        });
    });
    // 兜底修复回车内容消失问题，阻止事件冒泡避免组件误清理内容
    $("#textarea").on('keydown', function(e) {
        if(e.keyCode === 13) {
            e.stopPropagation();
        }
    });
});

3. 兼容高版本Bootstrap #

如果你使用的Bootstrap版本≥3.x，额外引入兼容Bootstrap 3+的typeahead插件即可。

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