Autocomplete with contenteditable div instead of textarea doesn't seem to work

Question

I am using the Andrew Whitaker autocomplete plugin also mentioned in this question: jquery autocomplete @mention

This does not work if I use a contenteditable div instead of a text field. Here is 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); } }; 

Any thoughts?

Answer 1

The main difference between the / textarea input and the contenteditable div is that you access the latest content using the .html () method (instead of the .value or .val () method.

Here is the autocomplete code:

 $("#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 link p>

Answer 2

The above example didn’t work. See this http://jsfiddle.net/ipsjolly/jYJjJ/29/

 select: function (event, ui) { var value = $(this).html(); var terms = split(value); terms.pop(); terms.push(ui.item.value); $(this).html(terms+", "); placeCaretAtEnd(this); return false; }