时间戳

首页 > 解决方案 > jQuery atWho 在 HTML 中生成 @mention 样式的文本输入

javascript - jQuery atWho 在 HTML 中生成 @mention 样式的文本输入

问题描述

在将文本输入表单字段时，我希望能够利用@mention 功能。我已经从这个站点jFiddle找到了执行此操作的确切代码，当您在那里执行此操作时，它会很糟糕。

但是，当我尝试创建一个将 HTML 和 JavaScript 结合在一起的 HTML 页面时，它不起作用，见下文。首先，我不得不去查找 jquery-3.2.1 的完整链接，因为在控制台中找不到并出错。现在它没有错误，但也不起作用。

在上面写着“我最喜欢的城市是”的地方，你可以输入一个@，然后选择 London、Stuttgart 和 Köln 应该显示由脚本触发的选项。

<html>
<head>
   <div id="inputcity" contenteditable="true">and my favourite city is </div>



<script src="https://code.jquery.com/jquery-3.2.1.min.js">

// Initialize city field within content editable

  $('#inputcity').atwho({
     at: "@",
     data:['London', 'Stuttgart', 'Köln']
  });
</script>

</head>
</body>
</html>

标签： javascriptjqueryhtml

解决方案

您需要将此脚本添加到您的代码中：

<link rel="stylesheet" href="https://cdn.rawgit.com/ichord/At.js/master/dist/css/jquery.atwho.css" />

<!-- jquery.js -->
<script src="https://cdn.rawgit.com/ichord/Caret.js/master/dist/jquery.caret.min.js"></script>
<script src="https://cdn.rawgit.com/ichord/At.js/master/dist/js/jquery.atwho.min.js"></script>

这是工作示例。

<div id="inputcity" contenteditable="true">and my favourite city is </div>

<link rel="stylesheet" href="https://cdn.rawgit.com/ichord/At.js/master/dist/css/jquery.atwho.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.rawgit.com/ichord/Caret.js/master/dist/jquery.caret.min.js"></script>
<script src="https://cdn.rawgit.com/ichord/At.js/master/dist/js/jquery.atwho.min.js"></script>

<script>
  // Initialize city field within content editable
  $('#inputcity').atwho({
    at: "@",
    data: ['London', 'Stuttgart', 'Köln']
  });
</script>

由于您使用的包（At.js）不再维护，您可以使用致敬包。

推荐阅读