javascript - jQuery UI 自动完成 : minLength in a textarea, 有没有办法在每个新行中从 0 开始计数？

Question

目前，我正在开发一个允许用户输入预定义句子的textarea。因此，用户不必输入所有这些句子。

我唯一想要更改的是，minlength 设置为 3，对于 textarea 中的第一行来说效果非常好。当然，在第 2 行中，它会显示所有条目，而无需等待 minlength，因为 minlength=3 由于前面的文本行而为 true。

如何重置或设置新文本行中的最小长度？

JS

$("#AutoCompleteSentenceSuggestion")
      .autocomplete({
          minLength: 3,
          source: function (request, response) {
              $.getJSON("/AutoCompleteFeatures/AutoCompleteSentenceSuggestion", {
                  term: extractLast(request.term)
              }, response);
          },
          focus: function () {
              return false;
          },
          select: function (event, ui) {
              var terms = split(this.value);
              terms.pop();
              terms.push("\u2022" + " " + ui.item.value);
              terms.push("");
              this.value = terms.join("\n");
              return false;
          }
      });

使用 HTML 标记更新:HTML

<table class="table-textarea">
            <tr>
                <td class="style-class-2" rowspan="2">4</td>
                <td class="style-class-3">Additional Information</td>
            </tr>
            <tr>
                <td>
                    @Html.TextAreaFor(m => m.additionalInformation)
                </td>
            </tr>
</table>

Answer 1

我使用我在评论中提到的示例来提供这一点。

工作示例:https://jsfiddle.net/Twisty/yfdjyq79/

JavaScript

$(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("\n");
  }

  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("\u2022 " + ui.item.value);
        // add placeholder to get the comma-and-space at the end
        terms.push("");
        this.value = terms.join("\r\n");
        return false;
      }
    });
});

当然，您需要移动您的源部分。我更新了 select 中的 split() 和 join()。使用 \r\n 不是必需的，但我认为它对于跨平台解决方案很重要。并非所有浏览器都会使用它作为行尾，因此我只寻找 \n 作为分隔符。

更新

以下更新将阻止在术语少于 3 个字符时触发新条目。

https://jsfiddle.net/Twisty/yfdjyq79/5/

JS 代码片段

  source: function(request, response) {
    // delegate back to autocomplete, but extract the last term
    var resp;
    var lastTerm = extractLast(request.term);
    if (lastTerm.length >= 3) {
      response($.ui.autocomplete.filter(availableTags, lastTerm));
    }
  },

您可以预先存储该值，但无法调用 $(selector).autocomplete("option", "minLength") 因为您正在初始化它。那会很方便。例如:https://jsfiddle.net/Twisty/yfdjyq79/7/