jQuery UI Autocomplete: minLength in a textarea, is there a way to begin counting from 0 in every new line?

Question

At the moment, I'm working on a textarea that allows the user to input predefined sentences. So, the user does not have to type in all those sentences.

The only thing I would like to change is, the minlength is set to 3, that works perfectly fine for the first line in the textarea. But of course in Line 2, it shows all entries without waiting for minlength, because minlength=3 is true because of the text line before.

How could I reset or set back the min length in a new line of text?

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

Update with HTML Markup: 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>

What does your HTML look like or do you have a fiddle example? Since you're adding a new line, you may need to treat this like a 'tag' style autocomplete. See: http://jqueryui.com/autocomplete/#multiple — Twisty, Feb 14 '17 at 20:23
Hey, thanks for your reply. My HTML is pretty simple, I included it, as an update of my post. — RawMVC, Feb 14 '17 at 21:46

Twisty · Accepted Answer · 2017-02-15T00:17:14.113

I offer this up, using the example I mentioned in my comment.

Working Example: 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;
      }
    });
});

You will want to move your source portions of course. I updated the split() and the join() within select. Using \r\n is not required, but I felt it was important to use for a cross platform solution. Not all browsers will use this as the end of line, so I only seek \n as the delimiter.

UPDATE

Here is an update that will prevent new entries from firing when the term is less then 3 characters.

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

JS Snippet

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

You can store the value up front but you cannot call $(selector).autocomplete("option", "minLength") since you're initializing it. That would have been convenient. For example: https://jsfiddle.net/Twisty/yfdjyq79/7/

Hi @Twisty, first of all thank you for your effort and time to answer. But the problem that I described above still exists in your fiddle. When I type in "Act" in the first line, autocomplete suggests ActionScript. Totally fine. But when I enter the second line and only type in A, all suggestions with including A appear, minlength is ignored in this case, and thats what I want to fix. So in the second line when I write A, nothing should happen, only with the minlength of 3, just like in the first line. — RawMVC, Feb 14 '17 at 22:00
@RawMVC I see what you're describing, so I will see what I can do about that. I suspect just it just has to be a condition before the filter. — Twisty, Feb 14 '17 at 22:21
@RawMVC check out the update and the final example: https://jsfiddle.net/Twisty/yfdjyq79/7/ — Twisty, Feb 15 '17 at 00:17
Aside, I see this as a bad way to collect a list of data. Personally, I would use a `
` style list. This way you can add more as needed, combine them later, and make a delete button. More overall control. — Twisty, Feb 15 '17 at 01:00

jQuery UI Autocomplete: minLength in a textarea, is there a way to begin counting from 0 in every new line?

1 Answers1

Linked