使用 contenteditable div 而不是 textarea 的自动完成功能似乎不起作用
我正在使用 Andrew Whitaker 的自动完成插件，在这个问题中也提到了:jquery 自动完成@mention
I'm using the autocomplete plugin by Andrew Whitaker, also referenced in this question: jquery autocomplete @mention
如果我使用 contenteditable div 而不是 textarea，这将不起作用.这是我的代码:
This doesn't work if I use a contenteditable div instead of a textarea. Here's my code:
<div id="MyText" contenteditable="true"></div>
$("#MyText").bind("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
event.preventDefault();
}
}).autocomplete({
minLength: 0,
source: function (request, response) {
var term = request.term,
results = [];
if (term.indexOf("@") >= 0) {
term = extractLast(request.term);
if (term.length > 0) {
results = $.ui.autocomplete.filter(tags, term);
} else {
results = [startTyping];
}
}
response(results);
},
focus: function () {
return false;
},
select: function (event, ui) {
if (ui.item.value !== startTyping) {
var terms = this.value.split(' ');
terms.pop();
terms.push("@" + ui.item.value + "</span>");
this.value = terms.join(" ");
}
return false;
}
}).data("autocomplete")._renderItem = function (ul, item) {
if (item.label != startTyping) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a><div><img src='" + item.icon + "'/></div><div>" + item.label + "</div></div></a>")
.appendTo(ul);
} else {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
}
};
有什么想法吗?
推荐答案
input/textarea 和 contenteditable div 的主要区别在于您使用 .html() 方法(而不是 .value 或.val() 方法.
The main difference between an input/textarea and a contenteditable div is that you access the latter content with the .html() method (instead of the .value or .val() method.
这是自动完成代码:
$("#MyText")
.bind("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function (request, response) {
var term = request.term,
results = [];
if (term.indexOf("@") >= 0) {
term = extractLast(request.term);
if (term.length > 0) {
results = $.ui.autocomplete.filter(tags, term);
} else {
results = [startTyping];
}
}
response(results);
},
focus: function () {
return false;
},
select: function (event, ui) {
if (ui.item.value !== startTyping) {
var value = $(this).html();
var terms = split(value);
terms.pop();
terms.push(ui.item.value);
$(this).html(terms.join("@"));
placeCaretAtEnd(this);
}
return false;
}
})
.data("autocomplete")._renderItem = function (ul, item) {
if (item.label != startTyping) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a><div>" + item.label + "</div></div></a>")
.appendTo(ul);
} else {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
}
}
;
EDIT(2):这是 链接到jsfiddle
相关文章