Как реализовать автозаполнение в любой позиции, когда я набираю текстовую область с помощью автозаполнения jquery-ui?

Question

Я хочу автозаполнять хэштеги в любой позиции текстовой области, например, когда я набираю «photo of #rain #nature», я хочу показать подсказку, когда кто-то печатает что-либо, начинающееся с «#», с помощью jquery autocomplete.

<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 };
                    }));
                });
            }
        });
    }
});

отлично работает в начале предложения, но не работает после ввода слова.

Answer 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;
  }
});
});