2017-02-14 7 views
0

На данный момент я работаю над textarea, который позволяет пользователю вводить предопределенные предложения. Таким образом, пользователю не нужно вводить все эти предложения.jQuery UI Autocomplete: minLength в текстовом поле, есть ли способ начать отсчет с 0 в каждой новой строке?

Единственное, что я хотел бы изменить - установить minlength на 3, что отлично работает для первой строки в textarea. Но, конечно, в строке 2 он показывает все записи, не дожидаясь minlength, потому что minlength=3 истинно из-за текстовой строки раньше.

Как я могу сбросить или установить минимальную длину в новой строке текста?

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> 
+0

Как выглядит ваш HTML или у вас есть сценарий? Поскольку вы добавляете новую строку, вам, возможно, придется рассматривать ее как автозаполнение стиля «тег». См .: http://jqueryui.com/autocomplete/#multiple – Twisty

+0

Эй, спасибо за ваш ответ. Мой HTML довольно прост, я включил его в качестве обновления моего сообщения. – RawMVC

ответ

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

Вы хотите переместить ваши source части конечно. Я обновил split() и join() в пределах select. Использование \r\n не требуется, но я чувствовал, что важно использовать для кросс-платформенного решения. Не все браузеры будут использовать это как конец строки, поэтому я ищу только \n в качестве разделителя.

UPDATE

Вот обновление, которое позволит предотвратить новые записи от стрельбы, когда этот термин менее 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/

+0

Привет @Twisty, прежде всего, спасибо за ваши усилия и время ответить. Но проблема, которую я описал выше, все еще существует в вашей скрипке. Когда я ввожу «Act» в первой строке, автозаполнение предлагает ActionScript. Полностью штраф. Но когда я вхожу во вторую строку и набираю только тип A, все предложения с включением A появляются, minlength игнорируется в этом случае, и это то, что я хочу исправить. Поэтому во второй строке, когда я пишу A, ничего не должно произойти, только с минимальной длиной 3, как и в первой строке. – RawMVC

+0

@RawMVC Я вижу, что вы описываете, поэтому я увижу, что я могу с этим поделать. Я подозреваю, что это просто должно быть условие перед фильтром. – Twisty

+0

благодарю вас за ваши усилия, чтобы помочь в этом случае :) – RawMVC