自动填充建议在jQuery中由@删除一个单词

时间:2017-07-01 20:51:33

标签: jquery jquery-ui autocomplete

我目前有一个聊天框,我希望当我的用户输入@时,将启用自动完成功能。 但是目前自动完成只能使用第一个字,当用户输入@theword时如何启用自动完成功能?

自动填充:

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

1 个答案:

答案 0 :(得分:0)

您可以在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>