jQuery UI Autocomplete:在textarea中的minLength，是否有一种方法可以在每一行中从0开始计数? [英] jQuery UI Autocomplete: minLength in a textarea, is there a way to begin counting from 0 in every new line?
问题描述
目前，我正在研究允许用户输入预定义句子的textarea.因此，用户不必键入所有这些句子.
我唯一要更改的是将minlength设置为3，对于textarea中的第一行，它工作得很好.但是，当然在第2行中，它显示所有条目而无需等待minlength，因为由于前面的文本行，minlength=3为true.
如何重新设置或设置新行中的最小长度?
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>
我使用我在评论中提到的示例来提供此功能.
工作示例: 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部分.我在select中更新了split()和join().不需要使用\r\n，但是我认为将其用于跨平台解决方案很重要.并非所有浏览器都将其用作行尾，因此我只寻求\n作为分隔符.
更新
这是一个更新，它将防止该词少于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/
At the moment, I'm working on a textarea that allows the user to input predefined sentences. So, the user does not have to type in all those sentences.
The only thing I would like to change is, the minlength is set to 3, that works perfectly fine for the first line in the textarea. But of course in Line 2, it shows all entries without waiting for minlength, because minlength=3 is true because of the text line before.
How could I reset or set back the min length in a new line of text?
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;
}
});
Update with HTML Markup: 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>
I offer this up, using the example I mentioned in my comment.
Working Example: 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;
}
});
});
You will want to move your source portions of course. I updated the split() and the join() within select. Using \r\n is not required, but I felt it was important to use for a cross platform solution. Not all browsers will use this as the end of line, so I only seek \n as the delimiter.
UPDATE
Here is an update that will prevent new entries from firing when the term is less then 3 characters.
https://jsfiddle.net/Twisty/yfdjyq79/5/
JS Snippet
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));
}
},
You can store the value up front but you cannot call $(selector).autocomplete("option", "minLength") since you're initializing it. That would have been convenient. For example: https://jsfiddle.net/Twisty/yfdjyq79/7/
这篇关于jQuery UI Autocomplete:在textarea中的minLength，是否有一种方法可以在每一行中从0开始计数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
