自动完成建议在 jQuery 中被 @ 删除的单词答案

【问题标题】：Autocomplete suggestion a word delemited by @ in jQuery自动完成建议在 jQuery 中被 @ 删除的单词
【发布时间】：2017-07-01 20:51:32
【问题描述】：

我目前有一个聊天框，我希望当我的用户输入 @ 时，自动完成功能将被启用。但目前自动补全功能仅适用于第一个单词，当用户键入 @theword 时如何启用自动补全？

对于自动完成：

$( "#chat_input" ).autocomplete({
  source: 'search.php'
});

【问题讨论】：

标签： jquery jquery-ui autocomplete

【解决方案1】：

您可以在JQuery ui自动完成中自定义搜索方法，想法是创建自己的正则表达式，在返回任何内容之前，您需要检查第一个输入的字母是否等于“@”

查看工作示例：

var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];

$("#chat_input").autocomplete({
  source: function(request, response) {
    var matcher = new RegExp(request.term.substring(1, request.term.length), "i");
    response($.grep(availableTags, function(item) {
      if (request.term[0] == "@") {
        return matcher.test(item);
      }
    }));
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div class="ui-widget">
  <label for="chat_input">Tags: </label>
  <input id="chat_input">
</div>

【讨论】：