Question

我想使用浏览器输入的值为textarea执行自动完成功能。它适用于Textbox但不适用于文本区域。

Answer 1

您需要使用外部插件

脚本和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 2

普通文本框确实可以免费获得自动完成行为。

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

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

我通常不喜欢在我的网络浏览器中安装第三方插件，但如果不小心丢失了我们已输入的所有文字，这可以节省大量时间和挫折。

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的自动完成功能。 HTML5中textarea正式允许autocomplete属性，默认值为on，但此值仅表示浏览器允许使用自动完成。他们实际上并没有将它用于textareas，显然是因为它很少有用，实际上可能会令人困惑。更有可能的是，用户想要重用他在单行文本输入字段中输入的地址信息，而不是他输入的一些冗长的文本，比如某个网站的反馈形式，现在其他一些网站碰巧有了评论textarea同名。

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

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

4 个答案: