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

最后发布: 2014-10-08 05:14:38


问题

我想使用浏览器中输入的值对textarea进行自动完成。 它适用于文本框,但不适用于文本区域。

html css asp.net-mvc-3
回答

您需要使用外部插件

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

演示链接

另一个插件TEXTEXTJS


回答

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

据我所知,通过在网络浏览器中安装lazarus插件,您可以获得类似的textarea行为(甚至具有更好的历史记录)。

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

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


回答

首先,您需要包括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
    });
});

});


回答

浏览器当前不支持文本区域的自动补全。 HTML5中的textarea正式允许使用autocomplete属性,该属性的默认值为on ,但是该值仅表示允许浏览器使用自动完成功能。 他们实际上并没有将其用于文本区域,这显然是因为它很少有用,并且实际上可能会造成混淆。 用户想要重用在单行文本输入字段中输入的地址信息,而不是用户输入的一些冗长的文本,例如某个站点的反馈形式,而现在其他站点恰好具有一个注释具有相同名称的textarea。

因此,您所要做的就是设置自己的一些自动完成功能。 (这是其他答案所提出的各种建议。)这意味着您需要以某种方式存储用户输入的内容(这也是浏览器对其自身的自动完成操作所做的操作),例如在cookie或localStorage 通常,这意味着该功能可以在网站内部的页面上使用相同的技术来实现,但不能跨网站使用。