使用输入值自动完成文本区域

Question

我想使用浏览器输入的值为文本区域创建自动完成。它正在为文本框工作，但不工作文本区域。

Answer 1

普通文本确实提供自动的行为是免费的。

据我所知，你可以在你的网络浏览器中安装lazarus插件，为textarea（甚至更好，所有的历史记录）获得类似的行为。

安装完成后，右上角会出现一个小十字图标。点击它将弹出以前的条目。

我通常不喜欢在我的网络浏览器中安装第三方插件，但是当意外丢失我们已经输入的所有文本时，这可以节省大量时间和沮丧。

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> 
$(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

浏览器当前不支持自动完成的textarea的。 autocomplete属性在HTML5中正式允许为textarea，并且它的默认值为on，但此值仅表示浏览器允许允许使用自动完成。他们实际上并没有将它用于textareas，显然是因为它很少有用，实际上可能会引起混淆。用户想要重复使用他在单行文本输入字段中输入的地址信息的可能性要大于他输入的某些长文本，比如某个站点的反馈表单，现在某个其他站点恰好有一个评论textarea同名。

因此，您所能做的就是设置一些自己的自动完成功能。 （这是其他答案以各种方式提出的建议）。这意味着您需要以某种方式存储用户输入（这也是浏览器为自己的自动完成操作所做的）在饼干或localStorage。这通常意味着该功能在网站内部工作，在使用相同技术实现它的页面上，但不在网站上。