Автозаполнение текстовой области с использованием введенных значений

Question

Я хочу сделать автозаполнение текстовой области, используя введенные значения из браузера. Он работает в текстовом поле, но не работает с текстовой областью.

Answer 1

Normal текстового поля действительно получить автозаполнение поведения бесплатно.

Насколько я знаю, вы можете получить подобное поведение для textarea (еще лучше, со всей историей) с установкой плагина lazarus в вашем веб-браузере.

После установки вы получите значок маленького креста в правом верхнем углу. При нажатии на это будут всплывать предыдущие записи.

Обычно мне не нравится устанавливать сторонний плагин в моем веб-браузере, но это может сэкономить много времени и разочарований при случайном потере всего текста, который мы уже вводим.

Answer 2

вам нужно использовать внешний модуль

скрипты и CSS

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 

HTML

<textarea id="demo"></textarea> 

Script

<script> 
$(function() { 
//Get the Data from a JSON or Hidden Feild 
var availableTags = ["jQuery.com", "jQueryUI.com", "jQueryMobile.com",  "jQueryScript.net", "jQuery", "Free jQuery Plugins"]; // array of autocomplete words 
var minWordLength = 2; 
function split(val) { 
return val.split(' '); 
} 

function extractLast(term) { 
return split(term).pop(); 
} 
$("#demo") // jQuery Selector 
// don't navigate away from the field on tab when selecting an item 
.bind("keydown", function(event) { 
if (event.keyCode === $.ui.keyCode.TAB && $(this).data("ui-autocomplete").menu.active)  { 
event.preventDefault(); 
} 
}).autocomplete({ 
minLength: minWordLength, 
source: function(request, response) { 
// delegate back to autocomplete, but extract the last term 
var term = extractLast(request.term); 
if(term.length >= minWordLength){ 
response($.ui.autocomplete.filter(availableTags, 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; 
} 
}); 
}); 
</script> 

DEMO LINK

ANOTHER PLUGIN TEXTEXTJS

Answer 3

Прежде всего, необходимо включить Jquery UI затем использовать код примера

HTML

<div class="ui-widget"> 
<label for="tags">Tags:</label> 
<textarea id="tags" size="30"></textarea> 
</div> 

JS

$(function() { 
$("document").ready(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"]; 

    $("#tags").on("keydown", function() { 
     var newY = $(this).textareaHelper('caretPos').top + (parseInt($(this).css('font-size'), 10) * 1.5); 
     var newX = $(this).textareaHelper('caretPos').left; 
     var posString = "left+" + newX + "px top+" + newY + "px"; 
     $(this).autocomplete("option", "position", { 
      my: "left top", 
      at: posString 
     }); 
    }); 

    $("#tags ").autocomplete({ 
     source: availableTags 
    }); 
}); 

}); 

Answer 4

Браузеры не поддерживают автозаполнение для текстовое поле. Атрибут autocomplete формально разрешен для textarea в HTML5 и имеет значение по умолчанию on, но это значение означает, что браузеру разрешено использовать для использования автозаполнения. Они фактически не используют его для текстовых полей, по-видимому, потому, что редко бывают полезны и могут на самом деле путать. Гораздо более вероятно, что пользователь хочет повторно использовать свою адресную информацию, введенную в однострочные текстовые поля ввода, чем какой-то длинный текст, который он ввел, скажем, форму обратной связи какого-либо сайта, и теперь на каком-то другом сайте комментарии textarea с тем же именем.

Таким образом, все, что вы можете сделать, это настроить некоторые функции автозаполнения. (Это то, что другие ответы предлагают по-разному.) Это означает, что вам нужно каким-то образом сохранить пользовательский ввод (что и делают браузеры для собственных операций автозаполнения), например. в файлах cookie или в localStorage. Обычно это означает, что функциональность работает внутри сайта, на страницах, используя ту же технику для ее реализации, но не через сайты.