当我使用 jquery-ui 自动完成在文本区域中键入时，如何在任何位置实现自动完成？答案

【问题标题】：How do I implement autocomplete at any position as I type in a textarea using jquery-ui autocomplete?当我使用 jquery-ui 自动完成在文本区域中键入时，如何在任何位置实现自动完成？
【发布时间】：2019-05-08 06:14:00
【问题描述】：

我想在文本区域的任何位置自动完成主题标签，例如当我输入“#rain #nature 的照片”时，我想在有人使用 jquery 自动完成输入以“#”开头的任何内容时显示建议。

<textarea class="form-control" rows="3" id="comment"></textarea>

我的数据库中存储了主题标签。

$('#comment').keyup(function (e) {
    var key = String.fromCharCode(e.which);
    console.log(key);
    if (key == 3) {
        //debugger;
        $('#comment').autocomplete({
            delay: 100,
            source: function (request, response) {
                var url = '@Url.Action("GetHashtags", "Common")';
                $.post(url, { str: request.term }, function (data) {
                    console.log(data);
                    response($.map(data, function (item) {
                        return { value: item.HashtagName };
                    }));
                });
            }
        });
    }
});

它在句子开头可以正常工作，但在输入一个单词后就不起作用了。

【问题讨论】：

请向Minimal, Complete, and Verifiable example 提供您在实施此功能时遇到的问题。

标签： jquery html razor

【解决方案1】：

找到了解决我的问题的方法。这是示例-

https://jsfiddle.net/atiqbaqi/rsmq07Lu/3/

<div class="ui-widget">
  <label for="tags">Tag programming languages: </label>
  <textarea id="tags" size="50"></textarea>
</div>

jquery:

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

function split(val) {
return val.split(/ +/);
  }

function extractLast(term) {
return split(term).pop();
  }

  $("#tags")
// don't navigate away from the field on tab when selecting an item
.on("keydown", function(event) {
  if (event.keyCode === $.ui.keyCode.TAB &&
    $(this).autocomplete("instance").menu.active) {
    event.preventDefault();
  }
})
.autocomplete({
  minLength: 3,
  source: function(request, response) {
    // delegate back to autocomplete, but extract the last term
    response($.ui.autocomplete.filter(
      availableTags, extractLast(request.term)));
  },
  focus: function() {
    // prevent value inserted on focus
    return false;
  },
  select: function(event, ui) {
    var terms = split(this.value);
    // remove the current input
    terms.pop();
    // add the selected item
    terms.push(ui.item.value);
    // add placeholder to get the comma-and-space at the end
    terms.push("");
    this.value = terms.join(" ");
    return false;
  }
});
});

【讨论】：