Mention.js 不会停止向用户推荐

Question

我想在将它添加到我的项目之前测试一些东西：来自 GitHub 的类似 Twitter 的提及用户功能：https://github.com/jakiestfu/Mention.js。

问题在于，他的演示工作方式是，他手动创建了一些数据并检索了这些数据。我不得不将它修改为 AJAX（我不太擅长使用我的数据库）。

问题是，每当我写@时，脚本都会完美地提示用户，但是从列表中选择一个后，列表不会消失并不断提示用户。最重要的是，在选择用户后，无论我在用户名后面输入什么，然后按回车键，我在用户名后面输入的所有文字都会完全消失。

依赖关系：

1. 引导式头部
2. jquery
3. mention.js

我的脚本

$(document).ready(function(){
    $.getJSON('fetch.php', function(data) {
         $("#textarea").mention({
           users: data
            });
        });
            
    });

fetch.php（非常基础，仅供测试）：

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'];
$user_data[$key]['image'] = " ";

}

echo json_encode($user_data);

这是代码，HTML只有一个id=textarea的文本区域。

原脚本：

$(document).ready(function(){
            
            $("#full").mention({
                users: [{
                    name: 'Lindsay Made',
                    username: 'LindsayM',
                    image: 'http://placekitten.com/25/25'
                }, {
                    name: 'Rob Dyrdek',
                    username: 'robdyrdek',
                    image: 'http://placekitten.com/25/24'
                }, {
                    name: 'Rick Bahner',
                    username: 'RickyBahner',
                    image: 'http://placekitten.com/25/23'
                }, 
            });
        });

如果我使用原始脚本，它可以完美运行，没有任何问题，但是当我将其更改为我的脚本时，写作问题开始出现。

Answer 1

首先通过别名获取数据。在这种情况下比 foreach 循环更好。

$users = $con->query("select f_name as name, name as username from users");

然后在您的 javascript 代码中将数据打印到控制台。

$(document).ready(function(){
    $.getJSON('fetch.php', function(data) {
         console.log(data);
         $("#textarea").mention({
           users: data
            });
        });
            
    });